vue-router基础详解

vue-router

路由：一个路由就是一组映射关系，key为路径，value可能是组件或者函数。也就是路径与组件或者函数之间的映射关系

vue-router是vue的一个插件，可以用来实现SPA单页面应用的切换

1.创建路由

在src下创建router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'//导入路由对象
import login from '@/views/login' //需要引入组件

Vue.use(VueRouter)//添加vue.use()身上

*// 创建路由规则数组*
const routes = [
 {*// 登录页面路由路径*path: '/login',name:'login',component: () => import('@/views/login') //组件名*// #这里是路由懒加载的写法**// #完整写法是：@/views/login/index.vue，但是index.vue可以省略，导入一个目录时默认导入目录下的index.vue**// # @符号指的是项目的src目录**// component: login这个是传统写法，加载速度慢,因为是加载的时候会全部都加载，所以较慢*children:[ //嵌套路由或者叫多级路由 ] },
]
//生成路由对象用规则
const router = new VueRouter({
 routes
})

//向外导入路由对象
export default router 

2把路由对象注入到new vue（） 实例中，进入main.js

new Vue({
 router, //注入路由对象
 store,
 render: *h* => h(App)
}).$mount('#app') 

3.在那个界面使用就在那个界面设置

<router-view > </router-view> 

2.基本路由切换

<router-linkto="./home"> </router-link>点击切换界面
//这个渲染到界面还是a标签 

1.router-link的replace属性：替换掉当前占用的那一条，浏览器历史记录中始终只有一条，再开启这个属性模式时，浏览器左上角可以观察到前进后退按键无效了

<router-linkreplace to="./home"> </router-link>点击切换界面
//这个渲染到界面还是a标签 

默认情况下，开启的是push模式

2几个注意点：被切换后的组件都被销毁了 ，切换过程就是挂载和销毁的过程，

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

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

3.嵌套路由

在创建的路由规则中配置children:[ 路由规则 ],例子如