目录
一、路由的基本使用
javascript
//该文件专门用于创建整个应用的路由器
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
}
]
});
javascript
<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>二、多级路由
javascript
//该文件专门用于创建整个应用的路由器
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
}
]
}
]
});
javascript
<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参数
javascript
<!---跳转路由并携带query参数，to的字符串写法-->
<!--<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{{ m.title }}</router-link> -->
<!---跳转路由并携带query参数，to的对象写法-->
<router-link
:to="{
path:'/home/message/detail',
query:{
id: m.id,
title: m.title
}
}">
javascript
<template>
<ul>
<li>消息编号:{{ $route.query.id }}</li>
<li>消息标题:{{ $route.query.title }}</li>
</ul>
</template>四、命令路由
javascript
export default new VueRouter({
routes:[
{
name: 'regard',
path:'/about',
component: About
}]
});
javascript
<router-link
:to="{
// path:'/home/message/detail',
name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
query:{
id: m.id,
title: m.title
}
}">五、路由的params参数
javascript
<router-link
:to="{
// path:'/home/message/detail',
name: 'particulars', //利用路由名字直接跳转路由简化多级路由的path配置
//注意如果你这里使用params传递参数,不能配置path，只能配置name,一定要注意
params: {
id: m.id,
title: m.title
}
}">
{{ m.title }}
</router-link>
javascript
<template>
<ul>
<li>消息编号:{{ $route.params.id }}</li>
<li>消息标题:{{ $route.params.title }}</li>
</ul>
</template>六、路由的props配置
javascript
{
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.id
props({ query: { id, title } }){
return {
id,
title
}
}
}
],
}
]
}七、router-link的replace的属性
javascript
<router-link replace class="list-group-item" active-class="active" to="/home/news">News</router-link>八、编程式路由导航
javascript
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
}
})
}
}九、缓存路由组件
javascript
<!--include的值代表要缓存的组件，比如下面代表在Home组件中要缓存News组件(组件名)-->
<!--如果要缓存多个路由组件就改写为:include="['News', 'Message']"-->
<keep-alive include="News">
<router-view>
</router-view>
</keep-alive>十、全局路由守卫
javascript
//全局前置路由守卫
//初始化和在每一次路由切换之前被调用
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.title
const { title } = to.meta;
document.title = title || 'vue-advance';
})十一、独享路由守卫
javascript
{
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();
}
}
}十二、组件内部路由守卫
javascript
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模式
javascript
//创建一个路由器
const router = new VueRouter({
//默认开启hash模式
mode: 'history'
});十四、使用路由元信息(meta)设置页面标题
javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home,
meta: { title: '首页' } // 添加meta字段，定义标题
},
{
path: '/about',
name: 'About',
component: About,
meta: { title: '关于我们' } // 添加meta字段，定义标题
}
]
javascript
router.beforeEach((to, from, next) => {
if (to.meta.title) {
document.title = to.meta.title + ' - 网站名称';
} else {
document.title = '网站名称';
}
next();
});