目录

一、路由的基本使用

二、多级路由

三、路由的query参数

四、命令路由

五、路由的params参数

六、路由的props配置

七、router-link的replace的属性

八、编程式路由导航

九、缓存路由组件

十、全局路由守卫

十二、组件内部路由守卫

十三、history模式和hash模式

十四、使用路由元信息(meta)设置页面标题

---

一、路由的基本使用

//该文件专门用于创建整个应用的路由器import VueRouter from "vue-router";
import About from "@/components/About";
import Home from '@/components/Home';//创建并默认暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component: About},{path:'/home',component: Home}]
});

 <router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

二、多级路由

//该文件专门用于创建整个应用的路由器import VueRouter from "vue-router";
import About from "@/pages/About";
import Home from '@/pages/Home';
import News from "@/pages/News";
import Message from "@/pages/Message";//创建并默认暴露一个路由器
export default new VueRouter({routes:[{path:'/about',component: About},{path:'/home',component: Home,children:[{path: 'news',component: News},{path: 'message',component: Message}]}]
});

  <router-link class="list-group-item" active-class="active" to="/about">About</router-link><router-link class="list-group-item" active-class="active" to="/home">Home</router-link>

三、路由的query参数

<!---跳转路由并携带query参数，to的字符串写法-->
<!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link>&nbsp;&nbsp;-->
<!---跳转路由并携带query参数，to的对象写法-->
<router-link:to="{path:'/home/message/detail',query:{id: m.id,title: m.title}}">

<template><ul><li>消息编号:{{ $route.query.id }}</li><li>消息标题:{{ $route.query.title }}</li></ul>
</template>

四、命令路由

export default new VueRouter({routes:[{name: 'regard',path:'/about',component: About}]
});

<router-link:to="{// path:'/home/message/detail',name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置query:{id: m.id,title: m.title}}">

五、路由的params参数

 <router-link:to="{// path:'/home/message/detail',name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置//注意如果你这里使用params传递参数,不能配置path，只能配置name,一定要注意params: {id: m.id,title: m.title}}">{{ m.title }}</router-link>

<template><ul><li>消息编号:{{ $route.params.id }}</li><li>消息标题:{{ $route.params.title }}</li></ul>
</template>

六、路由的props配置

  {path: 'message',component: Message,children:[{name: 'particulars',path: 'detail/:id/:title',component: Detail,//props的第一种写法值为对象,该对象的所有key-value都会以props的形式传给detail组件(死数据)// props:{//     a:1,//     b:'hello'// }//props的第二种写法，值为布尔值,布尔值为真，就会把该路由组件收到的所有params(注意如果是query参数不会奏效的)参数以props的形式传递给detail组件// props: true//props的第三种写法,值为函数  $route.query.idprops({ query: { id, title } }){return {id,title}}}],}]}

七、router-link的replace的属性

  <router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>

八、编程式路由导航

 methods:{pushShow(m){// console.log(this.$router); //router路由器 ==》管理 route路由(一系列key-value的规则)this.$router.push({//这里与router-link的to属性配置形式是一样的name: 'particulars',query:{id: m.id,title: m.title}})},replaceShow(m){this.$router.replace({//这里与router-link的to属性配置形式是一样的name: 'particulars',query:{id: m.id,title: m.title}})}}

九、缓存路由组件

<!--include的值代表要缓存的组件，比如下面代表在Home组件中要缓存News组件(组件名)-->
<!--如果要缓存多个路由组件就改写为:include="['News', 'Message']"-->
<keep-alive include="News"><router-view></router-view>
</keep-alive>

十、全局路由守卫

//全局前置路由守卫
//初始化和在每一次路由切换之前被调用
router.beforeEach((to, from, next) => {// console.log(to, from);console.log('前置路由守卫');const { isAuth } = to.meta;if(isAuth){//代表需要鉴权if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件else alert('无权限');}else{next();}
});//全局后置路由守卫
//初始化和在每一次路由切换之后被调用
router.afterEach(( to, from ) => {console.log('后置路由守卫', to, from);//点击每一个路由都切换西夏document.titleconst { title } = to.meta;document.title = title || 'vue-advance';
})

十一、独享路由守卫

 {name:'homepage',path:'/home',component: Home,meta:{title: '主页'},children:[{name: 'ns',path: 'news',component: News,//meta:路由元信息，可以配置是否需要校验的信息meta:{isAuth: true,title: '新闻'},//独享路由守卫beforeEnter(to,from,next){const { isAuth } = to.meta;if(isAuth){//代表需要鉴权if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件else alert('无权限');}else{next();}}}

十二、组件内部路由守卫

export default {name: "About",mounted() {console.log('The route of About', this.$route);},//组件内路由守卫//与前置和后置是两码事//通过路由规则进入该组件时被调用,注意一定是通过路由规则进入组件，普通的组件装载是不会调用的beforeRouteEnter(to, from, next){console.log('App---beforeRouteEnter');console.log(from, to);const { isAuth } = to.meta;if(isAuth){//代表需要鉴权if(localStorage.getItem('school') === 'wust1') next();//类似于nodejs中间件else alert('无权限');}else{next();}},//通过路由规则离开该组件时被调用beforeRouteLeave(to, from, next){console.log('App---beforeRouteLeave');console.log(from, to);next();}
}
</script>

十三、history模式和hash模式

//创建一个路由器
const router = new VueRouter({//默认开启hash模式mode: 'history'
});

十四、使用路由元信息(meta)设置页面标题

const routes = [{path: '/',name: 'Home',component: Home,meta: { title: '首页' } // 添加meta字段，定义标题},{path: '/about',name: 'About',component: About,meta: { title: '关于我们' } // 添加meta字段，定义标题}
]

router.beforeEach((to, from, next) => {if (to.meta.title) {document.title = to.meta.title + ' - 网站名称';} else {document.title = '网站名称';}next();
});