vue-router的详细安装及配置
目录
1、安装路由，
2、 引入并配置路由
3、 路由的视图展示
4、 路由跳转方式以及传递参数
5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。
6、路由的导航守卫
1、安装路由，
vue 给我们提供了路由功能，该包需要单独安装。
npm install vue-router -S
如果你的vue版本是2.0+ 那就要安装 vue-router@3 版本一下的，因为vue-router@4的版本只适合vue3，用在vue2.0+ 会报错。用在vue2.0+会报错
npm install vue-router@3 //指定下载3版本
如果安装错了使用一下命令删除
npm uninstall vue-router
2、 引入并配置路由
在src下创建一个 router.js文件，用来编写路由信息 。
import Vue from "vue";//引入vue
import VueRouter from "vue-router";//引入vue路由
import Home from "@/components/nav/Home.vue";//首页
import Search from "@/components/nav/Search.vue";//探索
Vue.use(VueRouter);//挂在路由插件
const routes = [//路由表示的是url和组件的一一对应的关系，使用path属性表示url路径，使用component属性表示组件
{
name:'Nhome',//Home
path:'/home',
component:Home,
},
{
name:'Nsearch',//探索
path:'/search',
component:Search
},
]
const router = new VueRouter({// 生成一个路由实例
routes// 配置项-配置视图和路由之间的对应关系
});
//修改原型对联 的push
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
//导航守卫
// router.beforeEach((to,from,next)=>{
// console.log(to,from)
// next();
// })
export default router // 导出路由实例路由中的配置对象
- name：给当前路由组件定义的名字。
- path：跳转时的路径，比如：this.$router.push('/about');
- component：引入外部资源 路径的名称。
- childen：[] 路由嵌套 是个数组形式 当前路由组件下的 子路由，也可以多级嵌套。
- meta：{} 路由元 可以设置一些自己的配置 平且可以在路由实例中拿到 meta对象，meta名字是固定的不能修改成其他的。
{
name:"给路由起的名字"，
path:"/about"，//路径
component:"About"，//引入的外部资源 比如import About from '@/index/index'
childen:[ // 嵌套路由
{
name:"xxxx",
path:"xxx",
component:"xxx"
}
]，
meta:{},//路由元 自定义配置
} 并且在main.js 中引入 vue路由实例
import Vue from 'vue'
import App from './App.vue'
import router from './router'//引入路由
import store from './store/store'//引入vuex
import i18n from './lang/index'
Vue.config.productionTip = false//关闭vue中的提示 true 是开启
Vue.use(ElementUI);//挂在ElementUI
new Vue({
render: h => h(App),
router,//路由
store,// 在这里注入store实例后，所有的组件都可以通过 this.$store去访问store实例
i18n
}).$mount('#app')
3、 路由的视图展示
<router-view>
//路由组件 在这里面显示
</router-view>4、 路由跳转方式以及传递参数
第一种标签跳转 router-link
to=" "：你要去哪里 直接写 路径地址 就是你配置在router.js 中的path的地址。
active-class=" "：被激活之后的样式 点击选中后会执行这里面的样式。
replace ：作用:控制路由跳转时操作浏览器历史记录模式
浏览器的历史记录有两种写入方式：分别时push和replace,
push是追加历史记录,
replace是替换当前记录(注意:是替换当前的), 路由跳转时候默认为push,
如何开启在 <router-link replace> </router-link>
<router-link replace to="/home/?id=1&tilet='哈哈'" active-class="active"></router-link>第二种编程式跳转以及携带参数
不携带参数的写法
this.$router.push("/home");携带参数的写法
pushShow(m){
this.$router.push({
name:'nihao',
query:{
id:m.id,
title:m.title
}
})
}还有就是上面所说的 replace 浏览器的历史记录，分别时push和replace, 以上两种都是push 追加历史记录,
下面这个是replace 替换历史记录，路由默认的是push追加。
replace的编程式路由导航
pushShow(m){//m 传递的参数
this.$router.replace({
name:'nihao',
query:{
id:m.id,
title:m.title
}
})
}5、路由组件独有的两个钩子函数(也称之为生命周期),用于捕获路由组件的激活状态。
1、跟组件中使用跟生命周期一样，只不过是用来捕获 路由组件的激活状态。
人话：就是被点击后展示当前组件时激活。
activated(){
console.log('被激活了')
}2、路由组件失活时触发 。
人话：就是不展示当前组件的时候就会触发
deactivated(){
console.log('被失活了')
}6、路由的导航守卫
路由守卫的 to去哪里，from从哪来，next可以去。
1、全局前置守卫！--初始化的时候就被调用、每次路由切换前被调用
router.beforeEach((to, from, next)=>{
//...
});2、全局后置守卫！--初始化的时候就被调用、每次路由切换前被调用，后置就没有next。
router.afterEach((to, from)=>{
//...
});3、独享路由守卫 只有前置没有后置
{
name:"xxx",
path:"xxx",
component:"xxx",
//独享前置守卫
beforeEnter:(to,from,next)=>{
//...
},
}4、组件路由后卫
通过路由规则，进入该组件时被调用。
路由规则： 就是点击 router-link 或者this.$router.push()。
beforeRouteEnter(to,from,next){
//通过路由规则，进入该组件时被调用路由规则 就是点击 router-link 或者this.$router.push()
},通过路由规则，离开该组件时被调用。
路由规则： 就是点击 router-link 或者this.$router.push()。
beforeRouteLeave(to,from,next){
//通过路由规则，离开该组件时被调用路由规则 就是点击 router-link 或者this.$router.push()
}