vue-router（一）

一、vue­router路由基本加载

简单四步走

1. 安装

npm install --save vue-router

2. 引用

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

3. 配置路由文件，并在vue实例中注入

var rt = new router({
routes:[{
path:'/',//指定要跳转的路径
component:HelloWorld//指定要跳转的组件
}]
})
new Vue({
el: '#app',
router:router,
components: { App },
template: ''
})

4. 确定视图加载的位置

二、 vue­router路由的跳转

三、11.3 vue­router路由参数的传递

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

1. 传递参数和接收参数看下边代码

HELLO WORLD

读取参数： $route.params.XXX
方式：===/helloworld/你好世界

HELLO WORLD

方式：===/helloworld?name=XX&count=xxx
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于
路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})