vue router 路由

1.基础路由

HTML

<template>
  <div>
	  <h1>基础路由</h1>
	  <p>
	    <!-- 使用 router-link 组件来导航. -->
	    <!-- 通过传入 `to` 属性指定链接去往哪个路由 -->
	    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
	    <router-link to="/foo">Go to Foo</router-link>
	    <router-link to="/bar">Go to Bar</router-link>
	  </p>
	  <!-- <router-view> 路由出口，路由匹配到的组件将渲染在这里 -->
	  <router-view></router-view>
  </div>
</template>

JS

import Vue from "vue";
import VueRouter from "vue-router";
import Foo from "../views/Foo.vue";
import Bar from "../views/Bar.vue";

Vue.use(VueRouter);

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

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes,
});

// 导出router实列
export default router;

我们可以在任何组件内通过 this.$ router 访问路由器，也可以通过 this.$ route 访问当前路由：

export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

---

2.嵌套路由

这里App.vue的 < router-view > 是最顶层的出口，渲染最高级路由匹配到的组件，此处有一个< Tab >组件，在开发项目时请不要再此处放组件，我放在此处只是为了方便查看

同样地，一个被渲染组件同样可以包含自己的嵌套 < router-view >。例如，在 router 组件的模板添加一个 < router-view >：

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：

---

3.动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：/user/1或/user/2，除了有前面的/user之外，后面还跟上了用户的ID(1、2)。这就是动态路由，即一个组件页面匹配不同的路劲

如下图所示此处的路由id是2，即访问的路由就是router/2

请留心这里的参数 this.$ route、this.$ router、以及通配符 “*”

---

4.编程式的导航

除了使用 < router-link to ="… " > 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，this.$ router.push("/xxx ")

声明式导航 | < router-link :to="…">
编程式导航 | this.$router.push("/xxx ")

// 编程式导航有如下几种方式进行添加导航
// 1.字符串，变成 /home
this.$router.push('home')
// 2.对象，变成 /home
this.$router.push({ path: 'home' })
// 3.命名的路由，变成 /user/123
this.$router.push({ name: 'user', params: { userId: '123' }})
// 4.带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
// 5.这里的 params 不生效，path和params这里组合不行
router.push({ path: '/user', params: { userId }}) // -> /user

注意：path和params组合不生效

1. this.$router.push(location, onComplete?, onAbort?)

// 这个方法会向 history 栈添加一个新的记录，所以，
// 当用户点击浏览器后退按钮时，则回到之前的 URL。

2. this.$router.replace(location, onComplete?, onAbort?)

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

3. this.$router.go(n)

// 这个方法的参数（n）是一个整数，意思是在 history 记录中向前或者后退多少步
// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

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

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

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

---

5.命名路由

有时候，通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候。你可以在创建 Router 实例的时候，在 routes 配置中给某个路由设置名称。

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

要链接到一个命名路由，可以给 router-link 的 to 属性传一个对象:

// 此处的url等于： user/123
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
//这跟代码调用 router.push() 是一回事：
this.$router.push({ name: 'user', params: { userId: 123 } })

这两种方式都会把路由导航到 /user/123 路径。

---

6.命名视图

7.重定向和别名

重定向

别名

---