基本用法用法
安装
npm install --save vue-router
引入
main.js
import VueRouter from 'vue-router';
Vue.use(Vuerouter);
const Routers = [
{
path:'/path',
component:(resolve) => require(['./views/about.vue'],resolve)
},
{
path:'/about',
component:(resolve) => require(['./views/about.vue'],resolve)
}
];
index.vue
<template>
<div>首页</div>
</template>
<script>
export default{
}
</script>
//about.vue
<template>
<div>介绍页</div>
</template>
<script>
export default {
}
</script>
params 和query传参
<div class="course-item" v-for="course in courses" :key="course.id">
<router-link :to="{name:'CourseShow',params:{id:course.id},query:{page:10}}">
<img :src="course.img" width="240" alt="">
<h5>{{course.name}}</h5>
<span>价格:{{course.price}}元</span>
</router-link>
</div>
获取参数
//获取路由中的params参数 /show/:id ,/show/10
this.$route.params.id
//获取路由中query参数: /list?page=12
this.$route.query.page
路由跳转
...
{
path:'*',
redirect:'/index'
},
{
path:'/user/:id',
component:userShow
}
...
组件跳转链接
<template>
<div>
<h1>首页</h1>
<router-link to="/about">跳转到</router-link>
replace 不会留下History记录,所以导航不能后退
<router-link to ="/about" replace></router-link>
</div>
</template>
this.$router.push()跳转:[常用]
<template>
<div>
<h1>介绍页</h1>
<button @click="handleRouter">跳转到user</button>
</div>
</template>
<script>
export default {
methods:{
handleRouter(){
this.$router.push('/user/123');
//第三种
//this.$router.replace('/user/123');
}
}
}
</script>
$router其他方法
//从历史记录中前后跳转
this.$router.go(-1);
this.$router.go(2);
高级用法
路由元字符/数据
//main.js
const Routers = [
{
path:'/index',
meta:{
title:"首页"
},
component:(resolve)=>require(['./views/index.vue'],resolve)
},
{
path:'/about',
meta:{
title:'关于'
},
component:(resolve) => require(['./views/about.vue'],resolve);
},
{
path:'/user/:id',
meta:{
title:'个人主页'
},
component:(resolve) => require(['./views/user.vue'],resolve);
},
{
path:'*',
redirect:'/index'
}
];
const router = new VueRouter(RouterConfig);
//全局路由守卫
router.beforeEach((to,from,next)=>{
window.document.title = to.meta.title;
next();
})
router.afterEach((to,from,next)=>{
window.scrollTo(0,0);
});