【Vue Router 3】入门-Toy模板网

这篇具有很好参考价值的文章主要介绍了【Vue Router 3】入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

简介

Vue Router让SPA（Single-page Application）的构建更加容易。

Vue Router的功能：

嵌套的路由/视图映射
模块化的、基于组件的router配置
route params, query, wildcards
由Vue过渡系统支持的视图过渡效果
细粒度（fine-grained）的导航控制
自动的激活CSS类的链接
HTML5 hash模式或history模式
可自定义的滚动行为

安装

使用CDN直接引入

从https://unpkg.com/vue-router@3/dist/vue-router.js下载文件。在Vue加载后加载Vue Router会自动安装它到Vue。

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

npm

在模块化系统中，先使用npm安装vue-router，

npm install vue-router

如果不使用全局的script的标签引入vue和vue router，那么可以使用Vue.use来安装vue router，

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

Vue.use(VueRouter)

Vue CLI

使用Vue CLI的项目可以运行下面的命令来以插件形式安装vue router，但是要注意这样做会覆盖你的App.vue文件，注意备份！

vue add router

从Github克隆最新版本

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

入门

Vue创建的应用程序由一个个组件构成，Vue Router的路由映射则将这些组件映射到路由上，如此便完成了在哪里渲染什么的目标。

在线快速尝鲜Vue

一个基础示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3/dist/vue-router.js"></script>
</head>

<body>
  <div id="app">
    <h1>Hello App!</h1>
    <p>
      <!-- router-link会被渲染为a标签，to属性指定目标链接 -->
      <router-link to="/foo">Go to Foo</router-link>
      <router-link to="/bar">Go to Bar</router-link>
    </p>
    <!-- route匹配到的组件将被渲染到这里 -->
    <router-view></router-view>
  </div>
  <script>
    // 组件定义
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    // 定义routes
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    // 创建router实例
    const router = new VueRouter({
      routes // `routes: routes`的简写
    })
    // 创建和挂载根Vue实例
    const app = new Vue({
      router, // 注入路由，于是我们可以通过this.$router访问router，通过this.$route访问当前route
      computed: {
        username() {
          return this.$route.params.username
        }
      },
      methods: {
        goBack() {
          window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
        }
      }
    }).$mount('#app')
  </script>
</body>

</html>