58 Vue Router

58 Vue Router

安装

新建项目

如果是新建项目，可以在 Vue CLI 搭建 时选中 Router

选择特性

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel # 这是一个 JS 转译的工具
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 ( ) Vuex
 (*) CSS Pre-processors # CSS 预处理器，如 sass、less
 (*) Linter / Formatter # 保障代码规范的工具，如 ESLint
 ( ) Unit Testing
 ( ) E2E Testing

选择模式

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

选择 history 模式，还有一种是 hash 模式

其他的操作与 搭建 Vue CLI 一致

新增路由

如果是在已有项目中新增 Vue Router

NPM

$ npm install vue-router

文件配置

在原项目中新增路由还需要手写框架

index.js

在 src 目录下创建 router 文件夹，在 router 文件夹下创建 index.js 文件，通过 Vue.use() 明确地安装路由功能

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

Vue.use(VueRouter)

import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = {
    path: '/',
    name : 'Home',
    component: Home,
    // redirect: '/About' 可以使打开页面时默认跳转到 About 对应的页面
}，
{
    path: '/about',
    name: 'About',
    component: About,
        
const router = new VueRouter({
  mode: 'history', // 选择的 history 模式，还有一种模式是 hash
  base: process.env.BASE_URL,
  routes
})

export default router

main.js

在 main.js 引入模块

import router from './router'

在实例化 Vue 新增 router

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

router-view 标签用于占位，有 name 属性