vue路由

1、路由文件配置

　　router文件夹下的index.js文件

　　　　import  Vue  from  'vue'

　　　　import  VueRouter  from  'vue-router'

　　　　Vue.use(VueRouter)

　　　　const  routes  =  [

　　　　　　{

　　　　　　　　path: '/',

　　　　　　　　redirect: '/home'

　　　　　　},　　　

　　　　　　{

　　　　　　　　path: '/home',

　　　　　　　　name: 'Home',

　　　　　　　　props:{name:'xxx'},　　// 路由隐式传参

　　　　　　　　component: ( )  =>  import('../views/Banner')

　　　　　　}

　　　　]

　　　　const  router  =  new  VueRouter({

　　　　　　linkActiveClass: 'selected',

　　　　　　routes

　　　　})

　　　　路由拦截

　　　　router.beforeEach((to, from, next) => {

　　　　　　console.log(to)

　　　　})

　　　　export default  router

2、路由跳转

　　路由传参

　　　　使用query传参,不需要处理相应路由

　　　　　　home?id=99

　　　　使用params传参,需要对相应路由做处理

　　　　　　home/99

　　　　　　{path: '/home/:id', name: 'Home'}

　　路由跳转的两种方式

　　　　声明式　

　　　　　　<router-link  to="/home">调到首页</router-link>

　　　　　　<router-link  :to="{path: '/home'}">调到首页</router-link>

　　　　　　<router-link  :to="{name: 'Home'}">调到首页</router-link>

　　　　　　<router-link  :to="{path: '/home', query: {id: 99}}">调到首页</router-link>

　　　　　　<router-link  :to="{name: 'Home', query: {id: 99}}">调到首页</router-link>

　　　　　　path搭配params使用，跳转无效

　　　　　　<router-link  :to="{path: '/home', params: {id: 99}}">调到首页</router-link>　

　　　　　　<router-link  :to="{name: 'Home', params: {id: 99}}">调到首页</router-link>

　　　　编程式

　　　　　　this.$router.push('/home')

　　　　　　this.$router.push({path: '/home'})

　　　　　　this.$router.push({name: 'Home'})

　　　　　　this.$router.push({path: '/home', query: {id: 99}})

　　　　　　this.$router.push({name: 'Home', query: {id: 99}})

　　　　　　path搭配params使用，跳转无效

　　　　　　this.$router.push({path: '/home', params: {id: 99}})

　　　　　　this.$router.push({name: 'Home', params: {id: 99}})