vue-router路由

目录

1.基本使用

2.嵌套路由（多级路由）

3.路由的query参数

4.命名路由

5.路由的params参数

6.路由的props配置

7.的replace属性

8.编程式路由导航

9.缓存路由组件

10.两个新的生命周期钩子

---

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

1.基本使用

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

（1）. 应用插件：

Vue.use(VueRouter)

（2）. 编写router配置项:

   新创建的router文件夹的index.js中

//在新创建的router文件夹中  
//引入VueRouter
   import VueRouter from 'vue-router'
   //引入路由 组件
   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
   ```

（3）. 实现切换

（active-class可配置高亮样式）

  App组件中

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

（4）. 指定展示位置

(与插槽类似)

   App组件中

   <router-view></router-view>

（5）.注意

- 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
-通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
-每个组件都有自己的$route属性，里面存储着自己的路由信息。
-整个应用只有一个router，可以通过组件的$router属性获取到。

2.嵌套路由（多级路由）

（1）路由的配置规则：使用children，配置项在router文件夹下面的js文件中配置

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