Vue vueRouter的基本使用

原创已于 2022-04-12 16:50:59 修改 · 622 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-04-12 13:31:36 首次发布

VUE基础专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中安装并配置Vue Router，包括创建路由实例、挂载到Vue应用及实际使用。通过一步步实践，读者将掌握基本的路由管理技巧。

一、Vue Router的基本使用

1、安装vue-router插件

npm install vue-router --save 1

链接：Vue Router文档

2、创建路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import listTemplate from '@/view/demo/listTemplate.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/demo',
    component: listTemplate
  }
]

const router = new VueRouter({
  routes
})

export default router

3.挂载到vue上

import Vue from 'vue'
import App from './App'
import router from '@/router/index'
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  router,
  template: '<App/>'
})

4、使用路由