Vue:vue-router

基本用法用法

安装

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);
});