使用vue-router的步骤
- 创建路由组件
- 配置路由映射
- 使用路由：router-link 和 router-view
<template>
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<router-view></router-view>
</div>
</template>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const home = () => import("../views/home.vue") //懒加载导入组件
const about = () => import("../views/about.vue")
const routes = [
{
path: '',
redirect: '/home' //重定向，路由的默认显示
},
{
path: '/home', //配置路由和组件的映射关系
name: 'home',
component: home,
meta: {
title: '首页页面'
},
},
{
path: '/about',
name: 'about',
component: about,
meta: {
title: '关于页面'
},
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//使用push的方法
const RouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return RouterPush.call(this, to).catch(err => err)
}
//使用replace的方法
const RouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
return RouterReplace.call(this, to).catch(err => err)
}
export default router
router-link的属性
- tag：router-link默认渲染成一个a标签，tag可改变其类型（button、li 等）
- router-link-avtive：被点击的router-link会被添加class=“router-link-avtive”，可在css中直接使用，用于改变被点击元素的样式
- avtive-class：可给router-link-avtive重命名，每个router-link添加，或在路由的index.js中修改
<template>
<div id="app">
<router-link to='/home' tag='button' avtive-class='active'>首页</router-link> <!-- 按钮 -->
<router-link to='/about' avtive-class='active'>关于</router-link> <!-- 给活跃样式重命名 -->
<router-view></router-view>
</div>
</template>
<style scoped>
.router-link-avtive {
color: red;
}
.active {
color: aqua;
}
</style>
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
linkActiveClass: 'active' //给活跃路由的class重命名
})
通过代码实现路由跳转
<template>
<div id="app">
<button @click="tohome">首页</button>
<button @click="toabout">关于</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
}
},
methods: {
tohome() {
this.$router.push('/home') //可返回的跳转
},
toabout() {
this.$router.replace('/about') //无痕跳转
}
},
}
</script>
路由嵌套
const routes = [
{
path: '',
redirect: '/home' //重定向，路由的默认显示
},
{
path: '/home', //配置路由和组件的映射关系
name: 'home',
component: home,
meta: {
title: '首页页面'
},
children: [ //路由的嵌套
{
path: '',
redirect: 'aaa'
},
{
path: 'aaa',
name: 'aaa',
component: aaa
},
{
path: 'bbb',
name: 'bbb',
component: bbb
}
]
},
{
path: '/about',
name: 'about',
component: about,
meta: {
title: '关于页面'
}
}
]
路由传参
<template>
<div id="app">
<router-link :to="{path: '/home', query: {name: '小明', age: 18}}">首页</router-link>
<button @click="toabout">关于</button>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
}
},
methods: {
tohome() {
},
toabout() {
this.$router.replace({
path: '/about', //跳转路由
query: { //输入要传递的值
name: '小王',
age: 20
}
})
}
},
}
</script>
<template>
<div>
<h2>关于页面</h2>
<h3>{{$route.query.name}}</h3>
<h3>{{age}}</h3>
</div>
</template>
<script>
export default {
name = 'about',
data () {
return {
age: this.$route.query.age
};
},
methods: {
}
}
</script>
router和route的区别
- router是整个大的路由
- route是当前活跃的路由
keep-alive的使用
路由跳转时，每次跳转，组件都会被销毁和重新创建，keep-alive可以使组件不被销毁，它的exclude可用于排除想被销毁的组件，传入组件的name属性值
<template>
<div id="app">
<router-link to='/home'>首页</router-link>
<router-link to='/about'>关于</router-link>
<keep-alive exclude='about'>
<router-view></router-view>
</keep-alive>
</div>
</template>
