（三）初学Vue之用Vue--cli+vue-route的一点新了解的东西。

最新推荐文章于 2025-02-24 11:45:26 发布

原创最新推荐文章于 2025-02-24 11:45:26 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

VUE 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍如何在 Vue 项目中配置和使用 vue-router 进行页面导航。从安装 vue-router 到配置路由规则，并展示了如何在组件中实现路由跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.简介

上一篇博客一个小demo提到了一点vue-router的用法，还是不能完全掌握，现又有了一点新的理解与体会，故添加在这篇博客中。vue-router的官方文档在这里，https://router.vuejs.org/zh/。

二.具体内容

1.命令行运行项目工程npm run dev

2.安装路由:npm install vue-router -S 之后打开我们的项目文件，在底部package.jonwe文件中的"dependencies":中，可以看到我们已经添加了router插件，如："vue-router": "^3.0.1",

3.现在仅仅是an'z安装了路由插件，具体使用还要配置相关文件，即router文件夹下的index.js，main.js，以及每个需要使用的vue组件。

具体配置如下：

① main.js

// 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 ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store.js'

Vue.use(ElementUI)
Vue.config.productionTip = false

// 路由跳转
Vue.prototype.$goRoute = function (index) {
  this.$router.push(index)
}
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

其中，

// 路由跳转

Vue.prototype.$goRoute = function (index) {

this.$router.push(index)

}

这是声明一个新的函数，为全局声明。以便在各个组件zhi直接方便调用该函数。或者也可以直接在一个组件单独使用，这样也很方便直观些，如：

methods: {

hanshu0 () {

this.$router.push('page03')

}

②router文件夹下的Index.js代码

import Vue from 'vue'
import Router from 'vue-router'
// import myHeader from '@/components/header'
// import myFooter from '@/components/footer'
import Index from '@/page/index'
import Page01 from '@/page/page01'
import Page01A from '@/page/page01-a'
import Page01B from '@/page/Page01-b'
import Page01B01 from '@/page/page01-a'
import Page02 from '@/page/page02'
import Page02A from '@/page/Page02-a'
import Page03 from '@/page/page03'
import Page04 from '@/page/page04'
import page0100 from '@/page/page0100' // 此地址由src目录下vue文件严格决定

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      children: [
        {
          path: 'page01',
          name: 'Page01',
          component: Page01,
          children: [
            {
              path: 'page01-a',
              name: 'Page01A',
              component: Page01A
            },
            {
              path: 'page01-b',
              name: 'Page01B',
              component: Page01B,
              children: [
                {
                  path: 'page01-b-01',
                  name: 'Page01B01',
                  component: Page01B01
                }
              ]
            }
          ]
        },
        {
          path: 'page02',
          name: 'Page02',
          component: Page02,
          children: [
            {
              path: 'page02a',
              name: 'Page02A',
              component: Page02A
            }
          ]
        },
        {
          path: 'page03',
          name: '组件加减法',
          component: Page03
        },
        {
          path: 'page04',
          name: '请求',
          component: Page04
        },
        {
          path: 'page0100',
          name: 'router',
          component: page0100, //组件命名无所谓，只要和上面import后面名字一致即可
          children: [
            {
              path: 'page01-a',
              name: 'Page01A',
              component: Page01A
            },
            
          ]
        }
      ]
    }
  ]
})

这里要注意两点：Ⅰ并列式的路由，和嵌套路由的区别。

Ⅱ‘/’为默认di'z地址，子路由children下的路由配置不需要再加‘/’了