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'}

 

　　路由跳转的两种方式

　　　　声明式　

　　　　　　调到首页

　　　　　　调到首页

　　　　　　调到首页

　　　　　　调到首页

　　　　　　调到首页

　　　　　　path搭配params使用，跳转无效

　　　　　　调到首页　

　　　　　　调到首页

 

　　　　编程式

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