Vue Router路由管理器

目录：

1. 相关理解
2. 基本路由
3. 几个注意事项
4. 嵌套（多级）路由
5. 路由的query参数
6. 命名路由
7. 路由的params参数
8. 路由的props配置
9. 路由跳转的replace方法
10. 编程式路由导航
11. 缓存路由组件
12. activated和deactivated
13. 路由守卫
14. 路由器的两种工作模式
     

相关理解

vue-router的理解

• vue 的一个插件库，专门用来实现SPA 应用

对SPA应用的理解

1. 单页 Web 应用（single page web application，SPA）
2. 整个应用只有一个完整的页面
3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
4. 数据需要通过ajax请求获取

路由的理解

1.什么是路由?

1. 一个路由就是一组映射关系（key - value）
2. key 为路径，value 可能是 function 或 componen

2.路由分类

后端路由：

• 理解：value 是 function，用于处理客户端提交的请求，工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据

前端路由：

• 理解：value 是 component，用于展示页面内容，工作过程：当浏览器的路径改变时，对应的组件就会显示

基本路由 

下载vue-router：

npm i vue-router@3

src/router/index.js: 

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
        }
    ]
})

src/main.js:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from "@/router";

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el: "#app",
    render: h => h(App),
    router,
})

src/App.vue:

src/components/Home.vue:

src/components/About.vue: 

public/index.html

public/css/bootstrap.css

这里不粘贴代码了，找资料复制到这个路径下。

运行结果：

总结：

1. 安装vue-router，命令：npm i vue-router

2. 应用插件：Vue.use(VueRouter)

3. 编写router配置项：

   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入Luyou 组件
   import About from '../components/About'
   import Home from '../components/Home'
   
   //创建router实例对象，去管理一组一组的路由规则
   const router = new VueRouter({
   	routes:[
   		{
   			path:'/about',
   			component:About
   		},
   		{
   			path:'/home',
   			component:Home
   		}
   	]
   })
   
   //暴露router
   export default router
   

4. 实现切换（active-class可配置高亮样式）：

   About
   

5. 指定展示位：

几个注意事项

上一节的案例就可以修改为：

src/pages/Home.vue:

src/pages/About.vue: 

src/router/index.js:

import VueRouter from "vue-router"
import About from "@/pages/About";
import Home from "@/pages/Home";


export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home
        }
    ]
})

 src/components/Banner.vue:

src/App.vue:

运行结果：

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹

2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载

3. 每个组件都有自己的$route属性，里面存储着自己的路由信息

4. 整个应用只有一个router，可以通过组件的$router属性获取到

嵌套（多级）路由

src/App.vue

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from "@/router";

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el: "#app",
    render: h => h(App),
    router,
})

 

src/pages/Home.vue:

src/pages/News.vue:

src/pages/Message.vue:

src/router/index.js:

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
                }
            ]
        }
    ]
})

src/components/Banner.vue

src/components/pages/About.vue

项目结构：

运行结果：

 

总结：

1. 配置路由规则，使用children配置项：

   routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
   				path:'message', //此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]
   

2. 跳转（要写完整路径）：News

 

 路由的query参数

src/router.index.js:

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";
import Detail from "@/pages/Detail";


export default new VueRouter({
    routes: [
        {
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue:

src/pages/Message.vue:

src/components/Banner.vue

src/pages/About.vue

src/pages/Home.vue

src/App.vue

src/main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from "@/router";

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
    el: "#app",
    render: h => h(App),
    router,
})

运行结果：

总结：

1. 传递参数：

   
   跳转
   				
   
   跳转
   

2. 接收参数：

   $route.query.id
   $route.query.title
   

命名路由

src/router/index.js:

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";
import Detail from "@/pages/Detail";


export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue:

总结：

命名路由：

1. 作用：可以简化路由的跳转

2. 如何使用：

   1. 给路由命名：

      {
      	path:'/demo',
      	component:Demo,
      	children:[
      		{
      			path:'test',
      			component:Test,
      			children:[
      				{
                          name:'hello' //给路由命名
      					path:'welcome',
      					component:Hello,
      				}
      			]
      		}
      	]
      }
      

   2. 简化跳转：

      
      跳转
      
      
      跳转
      
      
      跳转
      

路由的params参数

src/router/index.js:

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";
import Detail from "@/pages/Detail";


export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail/:id/:title',
                            component: Detail
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Message.vue:

src/pages/Detail.vue:

项目结构：

 

总结：

1. 配置路由，声明接收params参数：

   {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			path:'news',
   			component:News
   		},
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
   

2. 传递参数：

   
   跳转
   				
   
   跳转
   

   特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

3. 接收参数：

   $route.params.id
   $route.params.title
   

路由的props配置

src/pages/Message.vue:

src/router/index.js:

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";
import Detail from "@/pages/Detail";


export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true

                            //props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue:

总结：

• 作用：让路由组件更方便的收到参数

  {
  	name:'xiangqing',
  	path:'detail/:id',
  	component:Detail,
  
  	//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
  	// props:{a:1,b:'hello'}
  
  	//第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
  	// props:true
  	
  	//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
  	props(route){
  		return {
  			id:route.query.id,
  			title:route.query.title
  		}
  	}
  }
  

路由跳转的replace方法

总结：

1. 作用：控制路由跳转时操作浏览器历史记录的模式
2. 浏览器的历史记录有两种写入方式：push和replace，其中push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push方式
3. 开启replace模式：News
    

编程式路由导航

src/components/Banner.vue:

src/pages/Message.vue:

src/router/index.js:

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";
import Detail from "@/pages/Detail";


export default new VueRouter({
    routes: [
        {
            name: 'guanyu',
            path: '/about',
            component: About
        },
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: 'news',
                    component: News
                },
                {
                    path: 'message',
                    component: Message,
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail,
                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true

                            //props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id,
                                    title: $route.query.title
                                }
                            }
                        }
                    ]
                }
            ]
        }
    ]
})

src/pages/Detail.vue:

运行结果：

 

总结：

1. 作用：不借助实现路由跳转，让路由跳转更加灵活

2. 具体编码：

   this.$router.push({
   	name:'xiangqing',
       params:{
           id:xxx,
           title:xxx
       }
   })
   
   this.$router.replace({
   	name:'xiangqing',
       params:{
           id:xxx,
           title:xxx
       }
   })
   this.$router.forward() //前进
   this.$router.back() //后退
   this.$router.go() //可前进也可后退
   

缓存路由组件

src/pages/News.vue:

src/pages/Home.vue:

运行结果：

总结：

1. 作用：让不展示的路由组件保持挂载，不被销毁

2. 具体编码：

   //缓存一个路由组件
    //include中写想要缓存的组件名，不写表示全部缓存
       
   
   
   //缓存多个路由组件
    
       
   
   

俩个新的生命周期钩子：activated和deactivated 

src/pages/News.vue

 运行结果：

总结：

1. activated和deactivated是路由组件所独有的两个钩子，用于捕获路由组件的激活状态
2. 具体使用：
   1. activated路由组件被激活时触发
   2. deactivated路由组件失活时触发

 

路由守卫

全局路由守卫（全局前置路由守卫，全局后置路由守卫）

src/router/index.js:

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";
import Detail from "@/pages/Detail";


const router = new VueRouter({
    routes: [{
        name: 'guanyu',
        path: '/about',
        component: About,
        meta: {isAuth: false, title: '关于'}
    },
        {
            name: 'zhuye',
            path: '/home',
            component: Home,
            meta: {title: '主页'},
            children: [
                {
                    name: 'xinwen',
                    path: 'news',
                    component: News,
                    meta: {isAuth: true, title: '新闻'}
                },
                {
                    name: 'xiaoxi',
                    path: 'message',
                    component: Message,
                    meta: {isAuth: true, title: '消息'},
                    children: [
                        {
                            name: 'xiangqing',
                            path: 'detail',
                            component: Detail, //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值。若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
                            // props:true

                            //props的第三种写法，值为函数
                            props($route) {
                                return {
                                    id: $route.query.id, title: $route.query.title
                                }
                            },
                            meta: {title: '详情'}
                        }]
                }]
        }]
})

//全局前置路由守卫——初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    console.log('前置路由守卫', to, from)
    // if (to.path === '/home/news' || to.path === '/home/message') {
    // if (to.name === 'xinwen' || to.name === 'xiaoxi') {

    if (to.meta.isAuth) {
        if (localStorage.getItem('school') === 'atguigu') {
            // document.title = to.meta.title || 'xxx系统'
            next()
        } else {
            alert('学校名不对，无权限查看！')
        }
    } else {
        // document.title = to.meta.title || 'xxx系统'
        next()
    }

})
//全局后置路由守卫——初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || 'xxx系统'
    console.log('后置路由守卫', to, from)
})
export default router

运行结果：

 

 

独享路由守卫 

src/router/index.js:

//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入组件
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'


//创建一个路由器
const router = new VueRouter({
    routes:[
        {
            name:'guanyv',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{title:'新闻'},
                    //独享守卫，特定路由切换之后被调用
                    beforeEnter(to,from,next){
                        console.log('独享路由守卫',to,from)
                        if(localStorage.getItem('school') === 'atguigu'){
                            next()
                        }else{
                            alert('暂无权限查看')
                        }
                    }
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{title:'详情'},
							props($route){
								return {
									id:$route.query.id,
									title:$route.query.title,
								}
							}
                        }
                    ]
                }
            ]
        }
    ]
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
	console.log('后置路由守卫',to,from)
	document.title = to.meta.title || '硅谷系统'
})

//导出路由器
export default router

 组件内路由守卫

src/pages/About.vue

总结：

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫：

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
   	console.log('beforeEach',to,from)
   	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
   		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
   			next() //放行
   		}else{
   			alert('暂无权限查看')
   		}
   	}else{
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from) => {
   	console.log('afterEach',to,from)
   	if(to.meta.title){ 
   		document.title = to.meta.title //修改网页的title
   	}else{
   		document.title = 'vue_test'
   	}
   })
   

4. 独享守卫：

   beforeEnter(to,from,next){
   	console.log('beforeEnter',to,from)
       if(localStorage.getItem('school') === 'atguigu'){
           next()
       }else{
           alert('暂无权限查看')
       }
   }
   

5. 组件内守卫：

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {...},
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {...},
   

路由器的两种工作模式

• 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值
• hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器
• hash模式：
  1. 地址中永远带着#号，不美观
  2. 若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法
  3. 兼容性较好
• history模式：
  1. 地址干净，美观
  2. 兼容性和hash模式相比略差
  3. 应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题