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: '<App/>'
})

4. 确定视图加载的位置

<router-view></router-view>

二、 vue­router路由的跳转

<router-link to="/"></router-link>
<template>
<ul>
<li>
<router-link to="/helloworld">HELLO WORLD</router-link>
</li>
<li>
<router-link to="/helloearth">HELLO EARTH</router-link>
</li>
</ul>
</template>

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

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

1. 传递参数和接收参数看下边代码
<router-link
:to="{name: helloearth,params:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
读取参数： $route.params.XXX
方式：===/helloworld/你好世界
<router-link
:to="{path: '/helloearth',query:{msg: 只有一个地球}}">
HELLO WORLD
</router-link>
方式：===/helloworld?name=XX&count=xxx
函数模式
你可以创建一个函数返回 props。这样你便可以将参数转换成另一种类型，将静态值与基于
路由的值结合等等。
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({
query: route.query.q }) }
]
})