安装
//如果你使用的是vue-cli，那么你可以跳过了
npm install vue-router
使用
//ok，接下来你需要一个router.js文件，内容模板是这样的，请不要忘记这一步，（此后都是在工程化前提实施）
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
Vue.use(VueRouter)
export default new Router({
routes: [
{
name: 'xxx',
path: '/xxx',
component: Home
}
]
})
//然后你得去到 main.js 内，将这个路由注入，这里我就直接抄官方的模板了
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
现在你的路由跟上面一样了，然后，你需要在 app.vue 内这样写
//因为我们为xxx路径绑定的是 hello 组件，所以你可以自己去 hello 组件内写一些东西，方便验证
<router-link to="/xxx">点我去xxx</router-link>
动态传参
有时候我们回到这样的场景，网页中有几个选项卡，每个选项卡都有对应的id，每个选项卡点进去可以看到详细信息，这个时候，我们可以这样写
<router-link :to="{name: '选项卡页面', params:{id: 选项卡id}}">选项卡1</router-link>
//在 data 中就要定义对应的id
data(){
return {
选项卡id: 421
}
}
//router.js 内是这样写
{
name: '选项卡页面',
path: 'page/:id',
component: 选项卡页面 //需要import进来
}
//然后当我们点击这个标签时，url 后缀会变成这样 /page/421
//那么如何获取到这个id参数呢？
//这样
this.$route.params.id
//当然，如果你是在文本插值中使用，那么就不需要加this了
编程式导航
使用编程式导航就相当于使用<router-link to="xxx"></router-link>
//首先，你要将router对象导出，然后创建 helper.js ，导入 router
//router.js
consn router = new Router({
routes:[
//路由信息
]
})
export default touter
// helper.js
import router from './router'
export function xxx(){
router.push(这里可以写路径，也可以使用对象写法)
}
//然后在你需要使用的地方导入helper中对应的函数，监听click，方法就是你导入的这个函数
注意：如果提供了 path，params 会被忽略
嵌套路由
- 场景：
- 在 /user/:id 下，我们还需要在进入一个路由看到其他信息，这个路由得定义在 /user/:id 下，此时就可以使用嵌套路由
const router = new Router({
routes: [
// 动态路径参数 以冒号开头
{
name:'user',
path: '/user/:id',
component: user,
children:[
{
/*它匹配的路径是 /user/:id/foo*/
/*将对应的router-view写到user里面*/
name: 'user_foo',
path: 'foo',
component: foo
}
]
}
]
})
//定义在user里面
<router-link
:to="{
name: 'user_foo',
params: this.$route.params.id
}"
>
foo
</router-link>
