路由基本

在网页中，经常需要发生页面更新或者跳转。这时候我们就可以使用Vue-Router来帮我们实现。Vue-Router是用来做路由的，也就是定义url规则与具体的View映射的关系。可以在一个单页面中实现数据的更新。

安装：

使用CDN：
- 加载最新版的：<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>。
- 加载指定版本的：<script src="https://unpkg.com/vue-router@3.0.7/dist/vue-router.js"></script>。
下载到本地：<script src="../../lib/vue-router.js"></script>。
使用npm安装：npm install vue-router。

基本使用：

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

动态路由：

在路由中有一些参数是会变化的，比如查看某个用户的个人中心，那肯定需要在url中加载这个人的id，这时候就需要用到动态路由了。

示例代码如下：

<div id="app">
    <router-link to="/user/123">个人中心</router-link>
    <router-view></router-view>
</div>

<script>
    let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"}
    var routes = [
        {path: "/user/:userid",component: UserProfile}
    ]
    const router = new VueRouter({routes});
    Vue.createApp({router}).mount("#app"); 
</script>

解释：

:userid：动态的参数。
this.$route.params：这个里面记录了路由中的参数。

组件复用：

当使用路由参数时，例如从/user/foo导航到/user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地watch(监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

或者是使用后面跟大家讲到的导航守卫：

const User = {
  template: '...',
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

匹配404错误：

在路由规则中，*代表的是任意字符。所以只要在路由的最后添加一个*路由，那么以后没有匹配到的url都会被导入到这个视图中。示例代码如下：

let UserProfile = {template:"<h1>个人中心：{{$route.params.userid}}</h1>"};
let NotFound = {template: "<h1>您找的页面已经到火星啦！</h1>"}
var routes = [
    {path: "/user/:userid",component: UserProfile},
    {path: "*",component: NotFound},
]

嵌套路由：

有时候在路由中，主要的部分是相同的，但是下面可能是不同的。比如访问用户的个人中心是/user/111/profile/，查看用户发的贴子是/user/111/posts/等。这时候就需要使用到嵌套路由。示例代码如下：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // 当 /user/:id/profile 匹配成功，
          // UserProfile 会被渲染在 User 的 <router-view> 中
          path: 'profile',
          component: UserProfile
        },
        {
          // 当 /user/:id/posts 匹配成功
          // UserPosts 会被渲染在 User 的 <router-view> 中
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]
});

编程式导航：

之前我们学习了使用<router-link>可以在用户点击的情况下进行页面更新。但有时候我们想要在js中手动的修改页面的跳转，这时候就需要使用编程式导航了。

`$router.push`跳转：

想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的URL。

当你点击<router-link>时，这个方法会在内部调用，所以说，点击<router-link :to="...">等同于调用router.push(...)。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

`router.replace(location, onComplete?, onAbort?)`：

跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

`router.go(n)`：

这个方法的参数是一个整数，意思是在history记录中向前或者后退多少步，类似 window.history.go(n)。

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

// 前进 3 步记录
router.go(3)

// 如果 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 }})

命名视图：

有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有sidebar(侧导航) 和main(主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果router-view没有设置名字，那么默认为default。

<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>

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components配置 (带上s)：

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

重定向和别名：

重定向也是通过routes配置来完成，下面例子是从/a重定向到/b：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

重定向的目标也可以是一个命名的路由：

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: { name: 'foo' }}
  ]
})

“重定向”的意思是，当用户访问/a时，URL将会被替换成/b，然后匹配路由为/b，那么“别名”又是什么呢？

/a的别名是/b，意味着，当用户访问/b时，URL会保持为/b，但是路由匹配则为 /a，就像用户访问/a一样。

上面对应的路由配置为：

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

官方文档：

更多内容请参考vue-router官方文档：https://router.vuejs.org/zh/