从零开始学VUE之VueRouter(Vue-router的安装与集成)

彼岸舞

发布于 2021-07-01 18:02:30

4930

发布于 2021-07-01 18:02:30

安装Vue-router

因为我们采用的是Webpack工程,所以直接采用Npm安装

npm install vue-router --save

工程集成Vue-router

安装完成后在Package.json中查看

1:导入路由对象并通过Vue.use加载

2:创建路由实例,并传入路由映射配置

在src下创建router文件夹,并在里面创建index.js

import Vue from 'vue'
// 导入路由
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// Vue加载
Vue.use(Router)

// 传入路由映射配置 导出路由实例
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

3:在Vue实例中挂载创建的路由实例

main.js

import Vue from 'vue'
import App from './App'
// 导入创建的路由实例
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 挂载路由实例
  router,
  render: h => h(App)
})

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js