vue router 使用html,Vue Router使用方式介绍

Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，让构建单页面应用变得易如反掌。本文就来为大家介绍一下Vue Router的使用方式。

一、Vue中使用Vue Router简单方式使用 vue add xxx命令添加插件

使用步骤，本人假设已经安装好了Vue CLI工具

1.创建项目

vue create hello2

创建过程比较慢，需要稍等片刻。提示选择模板地方使用默认就可以了。

2.添加插件

vue add router

添加过程中，提示是否使用模块方式编程，选择yes就可以了

3.运行项目

npm run serve

运行成功后就可以开发调试了。

创建成功后的项目

创建成功后，会自动下载插件，并生成router.js文件，用于配置路由：import Vue from 'vue'

import Router from 'vue-router'

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

Vue.use(Router)

export default new Router({

mode: 'history',

base: process.env.BASE_URL,

routes: [

{

path: '/',

name: 'home',

component: Home

},

{

path: '/about',

name: 'about',

// route level code-splitting

// this generates a separate chunk (about.[hash].js) for this route

// which is lazy-loaded when the route is visited.

component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

}

]

})

更多web前端开发知识，请查阅 HTML中文网 ！！