• 【Vue基础系列】vue-router 万字详解，一篇彻底搞懂

    目录

    一、路由的简介

    二、路由基本使用

    三、嵌套路由

     四、路由的query参数

    五、路由的params参数

    六、路由的props配置

    七、编程式路由导航

    八、缓存路由组件

    九、两个新的生命周期钩子

    十、路由守卫

    一、路由的简介

            我们在生活中经常听到路由器，但关于路由可能不太了解。其实路由器就是在管理着多个路由（路由器后面的接口key，而另一端电脑或是手机等设备就是value）。

            一个路由就是一组key-value的对应关系，多个路由需要经过路由器的管理。其中key为路径，value可能是function或component。

            前端路由：value是component，展示页面内容。（当浏览器路径改变时，对应的组件就会显示）

            后端路由：value是function，用于处理客户端提交的请求。（服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回相应数据 例如：node.js）

            为什么要用路由呢？

            对于前端来说，路由里的key是路径，路由中的value是组件。

            生活中的路由和路由器是为了完成多台设备同时上网，编码中的路由和路由器是为了实现SPA单页面应用的导航区和应用去的来回切换。（补充：SPA单页面应用中1.只有一个完整页面；2.点击导航不会刷新页面，只会做页面局部更新；3.数据通过ajax请求获取）

            而在Vue中，vue-router路由是vue中的一个插件库，专门来实现单页面（SPA）应用。

    二、路由基本使用

            1.首先终端安装

    1. 如果是vue2安装@3，如果是vue3安装@4
    2. npm i vue-router@版本

            2.在main.js中引入

    1. //引入VueRouter
    2. import VueRouter from 'vue-router'
    3. //引入路由器
    4. import router from './router'
    5.  
    6. //应用插件
    7. Vue.use(VueRouter)
    8.  
    9. //创建vm
    10. new Vue({
    11. 	el:'#app',
    12. 	render: h => h(App),
    13. 	router:router
    14. })

            3.创建router文件夹，文件夹下index.js文件

    1. // 该文件专门用于创建整个应用的路由器
    2. import VueRouter from 'vue-router'
    3. //引入组件
    4. import About from '../components/About'
    5. import Home from '../components/Home'
    6.  
    7. //创建并暴露一个路由器
    8. export default new VueRouter({
    9. 	routes:[
    10. 		{
    11. 			path:'/about',
    12. 			component:About
    13. 		},
    14. 		{
    15. 			path:'/home',
    16. 			component:Home
    17. 		}
    18. 	]
    19. })

            4.在.vue组件中使用

    2.    
    3.    
    4.  
    6. 	    <router-link class="list-group-item" active-class="active" to="/about">Aboutrouter-link>
    7.         <router-link class="list-group-item" active-class="active" to="/home">Homerouter-link>
    8.  
    9.         <div class="panel-body">
    10.             
    11.             <router-view>router-view>
    12.           div>

            注意：

            1.文件夹pages放路由组件；文件夹components放一般组件。

            2.通过切换，隐藏了的组件，默认是被销毁的，需要时再挂载。

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

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

    三、嵌套路由

            1.在router中index.js中进行路由配置

    1. // 该文件专门用于创建整个应用的路由器
    2. import VueRouter from 'vue-router'
    3. //引入组件
    4. import About from '../pages/About'
    5. import Home from '../pages/Home'
    6. import News from '../pages/News'
    7. import Message from '../pages/Message'
    8.  
    9. //创建并暴露一个路由器
    10. export default new VueRouter({
    11. 	routes:[
    12. 		{
    13. 			path:'/about',
    14. 			component:About
    15. 		},
    16. 		{
    17. 			path:'/home',
    18. 			component:Home,
    19. 			children:[
    20. 				{
    21. 					path:'news',
    22. 					component:News,
    23. 				},
    24. 				{
    25. 					path:'message',
    26. 					component:Message,
    27. 				}
    28. 			]
    29. 		}
    30. 	]
    31. })

            2.Home组件与其子组件配置

    1. //Home.vue
    3.  
    4. <script>
    5. 	export default {
    6. 		name:'Home',
    7. 	}
    8. script>
    1. //Message.vue
    3.  
    4. <script>
    5. 	export default {
    6. 		name:'Message'
    7. 	}
    8. script>
    1. //News.vue
    3.  
    4. <script>
    5. 	export default {
    6. 		name:'News'
    7. 	}
    8. script>

            3.效果：

     四、路由的query参数

            如何给路由组件传递参数？

    1. //父组件Message