【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>Documenttitle>
  <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 to="/foo">Go to Foorouter-link>
      <router-link to="/bar">Go to Barrouter-link>
    p>
    
    <router-view>router-view>
  div>
  <script>
    // 组件定义
    const Foo = { template: '
foo
'
} const Bar = { template: '
bar
'
} // 定义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>

在路由匹配成功时,会自动设置.router-link-activeclass属性值。

参考资料

  • Installation-Vue Router 3
  • Get Started-Vue Router 3

你可能感兴趣的:(前端框架和库,vue.js,前端)