Vue路由知识点总结

目录

路由

一、基本使用

 二、几个注意点

三、多级路由

四、路由的query参数

五、命名路由

六、路由的params参数

七、路由的props配置

八、的replace属性

九、编程式路由导航

十、缓存路由组件

十一、两个新的生命周期钩子

十二、路由守卫

十三、路由器的两种工作模式

---

路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。

2. 前端路由：key是路径，value是组件。

一、基本使用

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

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

   //引入Vue
   import Vue from 'vue'
   //引入App
   import App from './App.vue'
   //引入VueRouter
   import VueRouter from 'vue-router'
   //引入路由器
   import router from './router'   //步骤3里
   
   //关闭Vue的生产提示
   Vue.config.productionTip = false
   //应用插件
   Vue.use(VueRouter)
   
   //创建vm
   new Vue({
   	el:'#app',
   	render: h => h(App),
   	router:router
   })
   

3. 在vouter/index.js文件中编写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可配置高亮样式）

   <router-link active-class="active" to="/about">About</router-link>

5. 指定展示位置

   <router-view></router-view>

 二、几个注意点

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

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

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

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

三、多级路由

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

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

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

   <router-link to="/home/news">News</router-link>