Vue Router 的使用

安装

直接下载：https://unpkg.com/vue-router/dist/vue-router.js
上面的链接会一直指向在 NPM 发布的最新版本。
在 Vue 后面加载 vue-router，它会自动安装

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use()明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

开始

用 Vue.js + Vue Router 创建单页应用，感觉很自然：使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。

<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>Hello App!</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>
</div>

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

// 1. 定义 (路由) 组件。
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 routes 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
const app = new Vue({
  router
}).$mount('#app')

// 应用已经启动了！

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

// Home.vue
export default {
  computed: {
    username() {
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}

< router-link to = "" >< / router-link > 默认会被渲染成一个 <a> 标签 to=""为我们定义的路由

< router-view >< / router-view > 路由匹配到的组件将渲染在这里

动态路由配置

多个路由映射到同一组件上

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

/user/foo 和 /user/bar 都将映射到相同的组件上。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：

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

嵌套路由

实现 Home 页面和 Doc 页面路由，其中 Doc 页面又分发为 Switch 和 Button 组件页面，实现 Doc 组件的嵌套路由。

const history = createWebHashHistory()
export const router = createRouter({
    history: history,
    routes: [
        { path: '/', component: Home },
        {
            path: '/doc',
            component: Doc,
            children: [
                { path: 'switch', component: SwitchDemo },
                { path: 'button', component: ButtonDemo },
            ]
        }
    ]
})

路由模式

1. hash 模式

• vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
• 任何情况下都可以使用，浏览器不会把 url # 后面的内容发送给服务器，这种模式的 SEO 不友好；

2. history 模式

• 只有当后端将所有前端路由都渲染到同一页面的情况下可以使用；
• 由window.location.pathName 获取 href， window.history.pushState() 改变 href ，onStateChange(href) 监听 href 变化

3. mermory 模式

• url 不会发生改变，从 localStorge 获取 url 的改变；
• 适用于非浏览器，如 APP 应用页面路由，是单机版路由