Vue Router使用方式介绍

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

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

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

1.创建项目

vue create hello2

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

1.jpg

2.添加插件

vue add router

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

2.jpg

3.运行项目

npm run serve

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

创建成功后的项目

3.jpg

创建成功后,会自动下载插件,并生成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中文网 !!

以上就是Vue Router使用方式介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏