vue-router、vue-cli

路由

一、安装router
二、引用

import router from 'vue-router'
Vue.use(router)

三、配置路由文件，并在vue实例中注入

//配置路由
var rt = new router({
  routes: [{
    path: '/', //指定要跳转的路径
    component: HelloWorld //指定要跳转的组件
  }]
})
new Vue({
  el: '#app',
  router: rt, //在vue实例中注入
  components: { App },
  template: '<App/>'
})

导出
export default new router({})
引用
在components中注入
router
router-view需要展示的地方
router-link 跳转路径，用to接地址

路由参数的传递

1.必须在路由内加入路由的name
2.必须在path后加/:+传递的参数

export default new router({ //导出文件用export default
    routes:[{
        name: 'helloWorld'
        path: '/helloWorld/:worldmsg', //指定要跳转的路径
        component: HelloWorld//指定要跳转的组件
    },{
        name: 'helloEarth'
        path: '/helloEarth/:earthmsg',
        component: HelloEarth
    }]
})

3.传递参数和接收参数

方法一：
注意to前面一定要加冒号，格式：name，params不能改变

//传递参数
<router-link :to="{name:'helloWorld',params:{worldmsg:'你好世界'}}">FRIST</router-link>  
//接收参数（需要在哪里展示就在哪里添加）
{{$route.params.xxx}}

方法二：（基本不用）

<router-link
 :to="{path:'/helloWorld',query:{msg:'lalala'}}"
>FRIST</router-link>

vue-router、vue-cli

路由

路由参数的传递

推荐阅读更多精彩内容