一.安装
npm install vue-router --save
//路由占位符
<template>
<div id="app">
<router-view />
</div>
</template>
二.在router.js中配置路由规则井创建路由实例
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/',
name: '',
redirect: '/home'
component: () => import("../view/tuCeng"),
meta: {
requireAuth: false //配置拦截
}
}
]
const router = new Router({
mode: 'hash',
base: process.env.BASE_URL,
routes
})
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(sessionStorage.getItem('Message')){
next();
}else{
next({
path:'/login'
})
}
}else{
next();
}
})
export default router;
三.router挂载到Vue根实例中
new Vue({
render: h => h(App),
store,
router,
}).$mount('#app')
四.路由跳转传参
(1) 声明式router-link
query参数
// to的字符串写法
<router-link :to="`/login?id=${message.id}&title=${message.title}`"></router-link>
<router-link :to="'/login?'+o.id"></router-link>
//to的对象写法
<router-link :to="{path: '/login',query: {id: message.id,title: message.title}}"></router-link>
通过$route.query接收
params参数
// to的字符串写法
<router-link :to="`/login/${message.id}/${message.title}`"></router-link>
//需在router.js中配置
path: '/login/:id/:title'
//to的对象写法
<router-link :to="{name: 'login',params:{id:message.id,title: message.title}}"></router-link>
//params需使用name
通过$route.params接收
(2)编程式$router.push
query参数
this.$router.push(
{
path: '/login',
query: {
id: id,
title:title
}
})
params参数
this.$router.push(
{
name: '/login',
params: {
id: id,
title:title
}
})
(3)路由的props配置
params参数
在router.js中设置 props:true 将路由收到的所有params参数通过props传给组件
//页面接收
<template>
<div>
<!-- 通过 props 接收 -->
<div>编号:{{ id }}</div>
<div>标题:{{ title }}</div>
</div>
</template>
<script>
export default {
props:['id','title']
}
</script>
query参数
//router.js中配置
props($route) {
return {
id: $route.query.id,
title: $route.query.title
}
}
//解构
props({query}) {
return {
id: query.id,
title: query.title
}
}
props({query:{id,title}}) {
return{id,title}
}
(4)编程式控制前进后退
this.$router.back()
this.$router.forward()
this.$router.go(num)
五.Vue-router的hash和history模式
hash模式:
路径用#拼接在真实url后面,当#后面的hash发生变化时,不会向服务器发出请求。
浏览器不发出请求就不会刷新页面,并且会触发hasChange这个事件,通过监听hash值的变化来实现更新页面部分内容的操作。
hash的改变会记录在window.history中,因此就可以发现浏览器可以实现前进后退功能了,因此实现了无刷新跳转。
history模式:
主要使用HTML5的pushState()和replaceState()这两个api来实现的。
pushState()可以改变url地址且不会发送请求。
replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。
可以将url替换同源url并且不刷新页面,http并没有去请求服务器该路径下的资源,如后端没有配置对应的子路由处理,则会返回404错误。