安装

//如果你使用的是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>