目录
1.4组件内部守卫(beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave)略
前言:
vue 属于单页面应用，所谓的路由，就是根据浏览器路径不同，用不同的视图组件替换这个页面内容展示
一.使用路由
1.1配置路由
新建一个路由index.js 文件，建立【路径】与【视图组件】之间的映射关系
import Vue from 'vue'
import VueRouter from 'vue-router'
import ContainerView from '@/views/example/ContainerView.vue'
import LoginView from '@/views/example/LoginView.vue'
import NotFoundView from '@/views/example/NotFoundView.vue'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: ContainerView
},
{
path:'/login',
component: LoginView
},
{
path:'/404',
component: NotFoundView
}
]
const router = new VueRouter({
routes
})
export default router注:@代表src下
1.2采用路由
在 main.js 中采用我们的路由 js,其实在引入时可以省略index，因为index是个特殊的东西，默认找不到就找index
import Vue from 'vue'
import App from './views/App.vue'
import router from './router/index'//引入路由
import store from './store'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false
Vue.use(Element)
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')根组件是App.vue,内容为：
<template>
<div class="all">
<router-view></router-view>
</div>
</template><router-view> 起到占位作用，改变路径后，这个路径对应的视图组件就会占据 <router-view> 的位置，替换掉它之前的内容
二.路由懒加载
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path:'/',
component: () => import('@/views/example/ContainerView.vue')
},
{
path:'/login',
component: () => import('@/views/example/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example/NotFoundView.vue')
}
]
const router = new VueRouter({
routes
})
export default router
静态导入是将所有组件的 js 代码打包到一起，如果组件非常多，打包后的 js 文件会很大，影响页面加载速度
动态导入是将组件的 js 代码放入独立的文件，用到时才加载
三.路由重定向
const routes = [
{
path:'/404',
component: () => import('@/views/example/NotFoundView.vue')
},
{
path:'*',
redirect: '/404'
}
]①redirect 可以用来重定向（跳转）到一个新的地址
②path 的取值为 * 表示匹配不到其它 path 时，就会匹配它
四.嵌套路由
比如当我们进入主页之后有分类，然后当选择其中一个分类之后进入对应的详情，这个时候组件内再要切换内容，就需要用到嵌套路由（子路由） ；官方文档中给我们提供了一个children属性，这个属性是一个数组类型，里面实际放着一组路由；这个时候父子关系结构就出来了，所以children属性里面的是路由相对来说是children属性外部路由的子路由；
const routes = [
{
path:'/',
component: () => import('@/views/example/ContainerView.vue'),
redirect: '/c/p1',
children: [
{
path:'c/p1',
component: () => import('@/views/example/container/P1View.vue')
},
{
path:'c/p2',
component: () => import('@/views/example/container/P2View.vue')
},
{
path:'c/p3',
component: () => import('@/views/example/container/P3View.vue')
}
]
},
{
path:'/login',
component: () => import('@/views/example/LoginView.vue')
},
{
path:'/404',
component: () => import('@/views/example/NotFoundView.vue')
},
{
path:'*',
redirect: '/404'
}
]子路由变化，切换的是 ContainerView 组件 中 <router-view></router-view> 部分的内容
<template>
<div class="container">
//路由占位标签
<router-view></router-view>
</div>
</template>五.路由跳转
1.1标签式
container组件内:
<template>
<div class="container">
<el-container>
<el-aside width="200px">
<router-link to="/c1/p1">P1</router-link>
<router-link to="/c1/p2">P2</router-link>
<router-link to="/c1/p3">P3</router-link>
</el-container>
</div>
</template>
<script>
export default options;
</script>标签导航<router-link>，<router-link>是通过转义为<a></a>标签进行跳转，其中router-link标签中的to属性会被转义为a标签中的href属性；
router-link属性介绍：
- to：用于指定跳转的路径
- tag：tag可以指定
<router-link>之后渲染成什么组件，比如我们下面的代码会被渲染成一个<li>元素，而不是<a>。 如：<router-link to='/home' tag='li'>- replace：replace不会留下history记录，所以指定replace的情况下，后退键返回不能返回到上一个页面中
- active-class：当
<router-link>对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。
1.2编程式
container组件内:
<template>
<div class="container">
<el-header>
<el-button type="primary" icon="el-icon-edit"
circle size="mini" @click="jump('/c1/p1')"></el-button>
<el-button type="success" icon="el-icon-check"
circle size="mini" @click="jump('/c1/p2')"></el-button>
<el-button type="warning" icon="el-icon-star-off"
circle size="mini" @click="jump('/c1/p3')"></el-button>
</el-header>
</div>
</template>
<script>
const options = {
methods : {
jump(url) {
// this.$router拿到的是路由对象
this.$router.push(url);//跳转路由
}
}
}
export default options;
</script>
其中 this.$router 是拿到路由对象
push 方法根据 url 进行跳转
补充：
1.3路由的query参数
①传递参数
<!-- 跳转并携带query参数，to的字符串写法 -->
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
<!-- 跳转并携带query参数，to的对象写法（推荐） -->
<router-link
:to="{
path:'/home/message/detail',
query:{
id: m.id,
title: m.title
}
}"
>跳转</router-link>②接收参数
$route.query.id
$route.query.title实例如下：
src/router.index.js
import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
path:'detail',
component:Detail
}
]
}
]
}
]
})src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带query参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">
{{m.title}}
</router-link> -->
<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link :to="{
path:'/home/message/detail',
query:{
}
}">
{{m.title}}
</router-link>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
}
}
</script>src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ $route.query.id }}</li>
<li>消息标题：{{ $route.query.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>1.4命名路由
作用：可以简化路由的跳转
使用：
①给路由命名
{
path:'/demo',
component:Demo,
children:[
{
path:'test',
component:Test,
children:[
{
name:'hello' // 给路由命名
path:'welcome',
component:Hello,
}
]
}
]
}②通过name属性简化跳转
<!--简化前，需要写完整的路径 -->
<router-link to="/demo/test/welcome">跳转</router-link>
<!--简化后，直接通过名字跳转 -->
<router-link :to="{name:'hello'}">跳转</router-link>
<!--简化写法配合传递参数 -->
<router-link
:to="{
name:'hello',
query:{
id:666,
title:'你好'
}
}"
>跳转</router-link>1.5路由的 params 参数
①配置路由，声明接收params参数
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', // 使用占位符声明接收params参数
component:Detail
}
]
}
]
}
②传递参数
特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！
<!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>
<!-- 跳转并携带params参数，to的对象写法 -->
<router-link
:to="{
name:'xiangqing',
params:{
id:666,
title:'你好'
}
}"
>跳转</router-link>
③接收参数
$route.params.id
$route.params.title实例如下：
src/router/index.js
import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
export default new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title', // 使用占位符声明接收params参数
component:Detail
}
]
}
]
}
]
})
src/pages/Message.vue
<template>
<div>
<ul>
<li v-for="m in messageList" :key="m.id">
<!-- 跳转路由并携带params参数，to的字符串写法 -->
<!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
{{m.title}}
</router-link> -->
<!-- 跳转路由并携带params参数，to的对象写法 -->
<router-link :to="{
title:m.title
}
}">
{{m.title}}
</router-link>
</li>
</ul>
<hr/>
<router-view></router-view>
</div>
</template>
<script>
export default {
name:'News',
data(){
return{
messageList:[
{id:'001',title:'消息001'},
{id:'002',title:'消息002'},
{id:'003',title:'消息003'}
]
}
}
}
</script>
src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ $route.params.id }}</li>
<li>消息标题：{{ $route.params.title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail'
}
</script>
1.6 路由的 props 配置
props作用：让路由组件更方便的收到参数
{
name:'xiangqing',
path:'detail/:id',
component:Detail,
//第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
// props:{a:900}
//第二种写法：props值为布尔值，为true时，则把路由收到的所有params参数通过props传给Detail组件
// props:true
//第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
props($route){
return {
id: $route.query.id,
title: $route.query.title
}
}
}
src/router/index.js
import VueRouter from "vue-router";
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'
export default new VueRouter({
routes:[
{
path: '/about',
component: About
},
{
path:'/home',
component:Home,
children:[
{
path:'news',
component:News
},
{
path:'message',
component:Message,
children:[
{
name:'xiangqing',
path:'detail/:id/:title',
// props:{a:1,b:'hello'}
// props的第二种写法，值为布尔值，
// 若布尔值为真，会把该路由组件收到的所有params参数，以props的形式传给Detail组件
// props:true
// props的第三种写法，值为函数
props(params) { // 这里可以使用解构赋值
return {
id: params.id,
title: params.title,
}
}
}
]
}
]
}
]
})
src/pages/Detail.vue
<template>
<ul>
<li>消息编号：{{ id }}</li>
<li>消息标题：{{ title }}</li>
</ul>
</template>
<script>
export default {
name:'Detail',
props:['id','title']
}
</script>
六.路由守卫
1.0简介：
路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等
1.1全局前置守卫(beforeEach)
to： 要进入的目标路由（去哪儿）
from： 要离开的路由（从哪来）
next： 是否进行下一步（要不要继续），写next()相当于next(true)继续执行；不写,相当于next(false)终止执行。next(path)跳转 例如：next("/login")
给需要守卫的路(需要权限验证的路由)由加上： meta: { permission: true },
router.beforeEach((to, from, next) => {
if (to.meta.permission) {
if (sessionStorage.getItem("token")) {
next();
} else {
alert("请先登录");
next("/login");
}
} else {
next();
}
});
1.2全局后置守卫(afterEach，少用)
router.afterEach((to, from) => {
// to and from are both route objects.
});
扫一扫
870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
