vue-router

中文文档地址： https://router.vuejs.org/zh-cn/essentials/nested-routes.html
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<p>
        <router-link to="/user/1">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
 </p>
<router-view></router-view>

const User = {
      template: '<div>User {{ $route.params.id }}</div>'
}
const Bar= {
      template: '<div>User</div>'
}

const router = new VueRouter({
      routes: [
            { path: '/user/:id', component: User },
  { path: '/bar', component: Bar }
      ]
})

var vue = new Vue({
router,
el:"#app"
})

二级路由：
const router = new VueRouter({
    routes: [
            { 
path: '/user/:id',
component: User,
                   children: [
                { 
     // 当 /user/:id 匹配成功，地址为空时跳转UserHome页面
                        // UserHome 会被渲染在 User 的 <router-view> 中
      path: '',
      component: UserHome 
   },
            {
                        // 当 /user/:id/profile 匹配成功，
                        // UserProfile 会被渲染在 User 的 <router-view> 中
                        path: 'profile',
                        component: UserProfile
                   },
                {
                        // 当 /user/:id/posts 匹配成功
                        // UserPosts 会被渲染在 User 的 <router-view> 中 --->  需要注意
                        path: 'posts',
                        component: UserPosts
                }
             ]
            }
      ]
});
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径

编程式导航：

router.push(location)
1.// 字符串
router.push('home')
2.// 对象
router.push({ path: 'home' })
3.// 命名的路由
router.push({ name: 'user', params: { userId: 123 }})
4.// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})
当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)

router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
声明式：
<router-link :to="..." replace>
编程式：
router.replace(...)

router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
1.// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
2.// 后退一步记录，等同于 history.back()
router.go(-1)
3.// 前进 3 步记录
router.go(3)
4.// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

命名路由
有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称
const router = new VueRouter({
      routes: [
            {
                  path: '/user/:userId',
                 name: 'user',
                  component: User
            }
      ]
})
要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
这跟代码调用 router.push() 是一回事
router.push({ name: 'user', params: { userId: 123 }})
这两种方式都会把路由导航到 /user/123 路径
例子：
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>This is Home</div>' }
const Foo = { template: '<div>This is Foo</div>' }
const Bar = { template: '<div>This is Bar {{ $route.params.id }}</div>' }

const router = new VueRouter({
      mode: 'history',
      base: __dirname,
      routes: [
            { path: '/', name: 'home', component: Home },
            { path: '/foo', name: 'foo', component: Foo },
            { path: '/bar/:id', name: 'bar', component: Bar }
      ]
})

new Vue({
      router,
      template: `
            <div id="app">
                  <h1>Named Routes</h1>
                  <p>Current route name: {{ $route.name }}</p>
                  <ul>
                    <li><router-link :to="{ name: 'home' }">home</router-link></li>
                    <li><router-link :to="{ name: 'foo' }">foo</router-link></li>
                    <li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
                  </ul>
                  <router-view class="view"></router-view>
            </div> `
}).$mount('#app')

命名视图：
有时候想同时（同级）展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar（侧导航） 和 main（主内容） 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default
html：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Named Views</h1>
  <ul>
    <li>
          <router-link to="/">/</router-link>
    </li>
    <li>
          <router-link to="/other">/other</router-link>
    </li>
  </ul>
  <router-view class="view one"></router-view>
  <router-view class="view two" name="a"></router-view>
  <router-view class="view three" name="b"></router-view>
</div>

js：
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const Baz = { template: '<div>baz</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { 
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    },
    {
      path: '/other',
      components: {
        default: Baz,
        a: Bar,
 b:Foo
      }
    }
  ]
})

new Vue({
    router,
      el: '#app'
})