Vue-Router基本使用

2020-06-16

字数：4133 阅读时间：21min

阅读量：4882

什么是前端路由

路由就是URL到函数的映射；前端路由就是由前端控制的URL和页面之间的映射关系；为减少页面到服务器的访问次数，现在大多数项目都采用SPA(单页面富应用)模式，而SPA就是前端路由广泛应用的例子；那么前端是怎么控制URL到对应的页面并且不刷新向服务器的请求，很容易就想到我们的URL中hash值改变不会刷新页面，还有H5中history 新增的pushState()和replaceState()方法；我们vue-router刚好就提供这两种模式

vue-router的基本安装和使用

配置路由文件
- 导入路由插件，并安装Vue.use(VueRouter)
- 实例化路由对象new VueRouter()，配置路由规则
- 导出实例化路由对象router
在main.js里挂载全局路由对象
- 导入路由实例
- 在全局Vue实例上挂载路由实例new Vue({router,render: h => h(App)}).$mount('#app')
在需要展示的位置通过<router-link>(相当于a标签)和<router-view>(相当于占位符,组件需要在什么地方展示)在指定的地方展示；其中router-link出于活跃状态的哪个会有一个class，可用于设置活跃时的状态

//router.js
//1.导入路由
import VueRouter from 'vue-router'
const Home = () => import('@/views/home/Home')//导入页面组件（注意：路由懒加载写法）
//2.安装路由
Vue.use(VueRouter)
const routes = [//配置路由映射关系
{
path:'',
redirect:'/home'//路由重定向
},
{
path:'/home',
component:Home
}
];
//3.实例化路由
const router = new VueRouter({
routes,
mode:"history"//设置路由模式，可以设置hash模式和history模式
});
//4.导出路由
export default router
//main.js
import router from './router'//引入router
new Vue({
router,//全局注册router，以后可以在任何地方使用$router
render: h => h(App),
}).$mount('#app')
//home.vue
<router-link to='/regist'>首页</router-link>//导航选项，会被解析成a标签
<router-view></router-view>//相当于占位符,组件需要在什么地方展示写在什么地方

//router.js

//1.导入路由

import VueRouter from 'vue-router'

const Home = () => import('@/views/home/Home')//导入页面组件（注意：路由懒加载写法）

//2.安装路由

Vue.use(VueRouter)

const routes = [//配置路由映射关系

{

path:'',

redirect:'/home'//路由重定向

{

path:'/home',

component:Home

}

];

//3.实例化路由

const router = new VueRouter({

routes,

mode:"history"//设置路由模式，可以设置hash模式和history模式

});

//4.导出路由

export default router

//main.js

import router from './router'//引入router

new Vue({

router,//全局注册router，以后可以在任何地方使用$router

render: h => h(App),

}).$mount('#app')

//home.vue

<router-link to='/regist'>首页</router-link>//导航选项，会被解析成a标签

<router-view></router-view>//相当于占位符,组件需要在什么地方展示写在什么地方

路由配置

路由的重定向：redirect，页面重定向为需要的页面；通常在将首页重定向为home：{path:'',redirect:'/home'}
平级路由：在同一级下的不同路由可以写在components里：{path:'/home',components:{default:header,left:lefter,right:righter}};然后再去需要引入的地方，引入name值为这个变量的router-view标签 <router-view name='left'>
嵌套路由：在一个路由下可以嵌套多层子路由；在路由匹配规则里可以写在children里：{path:'/home',children:[{path:'head/log2',component:log2},{path:'head/reg2',component:reg2}]};然后再去需要嵌套的地方嵌套子路由
hash模式和history模式：在路由配置文件里router实例中直接设置mode:'history'，默认时hash
- hash模式出来的URL地址带#不太美观，history更像是一个URL地址；
- hash虽然出现在 URL 中，不会重新加载页面；history利用的是浏览器缓存，当前进或后退的时候都不会立即向后端发送请求，但是刷新的时候就会重新发送请求，所以这时候需要后端的配合指向正确的路由才行，要不然就会刷出404
- hash可以兼容到IE8，history兼容到IE10
路由元信息：在定义路由的时候我们可以添加meta路由元信息，他可以记录你需要用到的数据；（例如我们要修改页面的title为当前页面名字就可以在当前路由匹配规则里写：{path:'/shopCar',meta:{title:'购物车'}}；然后到当前路由下设置全局title：document.documentElement.title = this.$route.meta.title;如果存在路由嵌套拿不到meta.title，可以去 this.$route.matched.meta[0].title )
路由懒加载：因为我们组件的js在打包的时候最终都会被打包进app.js中，导致app.js很大，首次加载压力太大可能会白屏，所以可以引入路由懒加载需要用到什么路由才加载什么路由下的代码；只需要在配置路由引入组件的时候使用 const Home = ()=> import('@/view/home/home')

路由传参和获取参数

传参
- params：this.$router.push({name:'home',params{id:222}})
- query：this.$router.push({path:'home',query{id:222})
获取参数
- this.$route.params.name
- this.$route.query.name
params和query的区别
- params传参必须要用name引入，而query使用path和name都可以
- params传参更像是post请求，url不会显示完整信息http://localhost:8080/workorder/newApply而query传参更像是get请求会带所有信息http://localhost:8080/workorder/newApply?type=BOX_DEPLOY&typeDesc=%E5%B0%8F%E7%99%BD%E7%9B%92%E9%83%A8%E7%BD%B2
- params传参是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系；
- params刷新时会丢失params里的数据，而query不会
$router和$route的区别
- $router是挂载到全局的路由实例，是只写对象，例如：想要导航到不同页面可使用$router.push()
- $route是当前活动路由对象，是只读对像，例如：我们可以获取当前特面的 name、path、query、params等

关于$router、$route、<router-link>、<router-view>的api可以参阅: https://router.vuejs.org/zh/api/#append

动态路由

路由配置：在选哟动态生成的路由匹配规则里添加动态参数':iid'：{path:'/home/:iid',component:{}}
使用：声明式<router-link :to="'/home/' + iid">;编程式this.$route.params.iid；这里的iid最好写在props里

声明式导航和编程式导航

声明式导航：<router-link to='/home'>
编程式导航：this.$router.push('./home')

导航守卫

有些业务是需要我们在路由跳转的过程中实现的，vue-router就提供了导航守卫来监听路由跳转的各个阶段；导航守卫可以分为以下几种

全局守卫：在router配置文件里定义全局所有的路由跳转时的回调函数
- beforeEach((to,from,next)=>{})：全局前置守卫，定义在路由跳转之前要做的事情；eg:router.beforeEach((to,from,next)=>{console.log(to)})
  - to: 要进入的路由对象
  - from：要离开的这个路由对象
  - next：接下来要执行的操作，必须设置，要不然下边的钩子都没用了；next()：默认执行管道中的下一个钩子； next(false): 中断当前的导航 ; next('/') ：终止当前跳转，跳转到指定的地址
- beforeResolve((to,from,next)=>{})：和beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用
- afterEach((to,from)=>{})：全局后置钩子，在路由跳转后调用
路由独享守卫：如果想在某个特定的组件路由上使用导航就可以使用路由独享守卫
- beforeEnter：进入这个路由之前要做的事儿；routers:[path:'/home',component:Foo,beforeEnter:(to,from,next)=>{console.log(to)}]
组件内守卫：在组件内可以直接使用的守卫
- beforeRouteEnter：在渲染该组件的路由之前调用，因为该组件实例还没有被创建，所以不能够访问this； beforeRouteEnter (to,from,next){console.log(to)}
- beforeRouteUpdate (2.2 新增)：当前路由被改变的时候调用，可以访问this
- beforeRouteLeave ：导航离开改组件的时候触发改回调，可以访问this

导航发生改变时导航守卫的触发顺序
1. 失活的组件里调beforeRouteLeave 守卫
2. 全局调beforeEach 守卫
3. 重用组件里调beforeRouteUpdate 守卫 (2.2+)
4. 路由配置里调 beforeEnter
5. 激活的组件里调beforeRouteEnter
6. 全局调 beforeResolve 守卫 (2.5+)
7. 全局调 afterEach 钩子
8. 触发 DOM 更新

keep-alive遇见vue-router

在平时的开发中，我们有时没必要多次初始化组件，我们需要维持组件的状态不变，在下次展示的时候也不会重新初始化组件；keep-alive是一个VUE的内置组件，它可以使被包含的组件保留状态，或避免重新渲染 。也就是所谓的组件缓存

被keep-alive包裹的组件不会被重新渲染，也就是不会再次触发生命周期钩子函数，这时候被keep-alive包裹的组件就会多出两个生命周期函数 activated：组件再次渲染的时候触发；deactivated：组件销毁的时候触发

keep-alive组件可以设置三个属性
- include：包含的组件(这里写组件设置的name值)，只有被匹配的组件会被缓存
- exclude：排除的组件，不会被缓存，exclude优先级要大于include
- max：缓存组件的最大个数

配合vue-router使用：

//所有组件都缓存
<keep-alive>
<router-view/>
</keep-alive>
//只有组件name值的组件缓存
<keep-alive include='组件name值'>
<router-view/>
</keep-alive>
//除了组件name值的组件外这里得所有组件都缓存
<keep-alive exclude='组件name值'>
<router-view/>
</keep-alive>
//使用meta值判断哪个组件缓存哪个组件不缓存
// routes 配置
export default [
{
path: '/',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
}, {
path: '/profile',
component: Profile,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
//使用
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>

//所有组件都缓存

<keep-alive>

<router-view/>

</keep-alive>

//只有组件name值的组件缓存

<keep-alive include='组件name值'>

<router-view/>

</keep-alive>

//除了组件name值的组件外这里得所有组件都缓存

<keep-alive exclude='组件name值'>

<router-view/>

</keep-alive>

//使用meta值判断哪个组件缓存哪个组件不缓存

// routes 配置

export default [

{

path: '/',

component: Home,

meta: {

keepAlive: true // 需要被缓存

}

}, {

path: '/profile',

component: Profile,

meta: {

keepAlive: false // 不需要被缓存

}

]

//使用

<keep-alive>

<router-view v-if="$route.meta.keepAlive"/>

</keep-alive>

keep-alive使用时需注意的几点
- keep-alive匹配的是组件的name字段，但是如果name不可用就会匹配当前组件components配置的注册名称
- exclude优先级要高与include，两者都存在相同组件的时候，会include会被exclude覆盖
- keep-alive中包含exclude的组件不会触发activated和deactivated钩子函数

野生小园猿

励志做一只遨游在知识海洋里的小白鲨

查看“野生小园猿”的所有文章 →