路由
一 、安装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>
