【Vue学习总结】01—Vue中的路由以及默认路由跳转

原创

已于 2022-04-11 11:19:51 修改 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #html5

于 2021-09-08 17:18:19 首次发布

本文总结了Vue项目中路由的配置方法，包括在src/router/index.js中设置路由，在src/main.js中导入router，以及创建HelloWorld.vue和second.vue组件。通过在App.vue中引用路由，实现了页面间的跳转，如从首页到helloWorld页面，再到second页面的无缝切换。

1、在/src/router的index.js文件中配置路由

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import second from '@/components/second'

// 1、引入vue-router
Vue.use(Router)

// 2、定义路由，此处定义了2个路由
const routes = [
  {path: '/helloWorld', component: HelloWorld},
  {path: '/second', component: second}
]

// 3、实例化Router
const router = new Router({
  routes
})

// 4、暴露组件，在mian.js中引入该router
export default router

2、在/src的main.js中导入router

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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,  //此处调用配置的router
  components: { App },
  template: '<App/>'
})

3、编写HelloWorld.vue文件