(3) Learning how to use Vue -- cli + Vue route.

I. Introduction

In the last blog, a small demo mentioned the usage of Vue router, which can't be mastered completely. Now it has a new understanding and experience, so it's added to this blog. Here are the official documents of Vue router, https://router.vuejs.org/zh/.

2, Specific content

1. Run the project project npm run dev from the command line

2. Install route: after NPM install Vue router - s, open our project file. In "dependencies" in the bottom package.jonwe file, you can see that we have added the router plug-in, such as "Vue router": "^ 3.0.1",

3. Now only an'z has installed the routing plug-in. For specific use, you need to configure related files, namely index.js and main.js under the router folder, as well as each vue component that needs to be used.

The specific configuration is as follows:

① 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

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

Among them,

//Route jump

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

   this.$router.push(index)

}

This is to declare a new function for global declaration. In order to call this function directly and conveniently in each component. Or it can be used directly in a component, which is also convenient and intuitive, such as:

methods: {

   hanshu0 () {

   this.$router.push('page03')

}

}

② Index.js code under router folder

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' // This address is strictly determined by the vue file in the src directory

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 addition and subtraction',
          component: Page03
        },
        {
          path: 'page04',
          name: 'request',
          component: Page04
        },
        {
          path: 'page0100',
          name: 'router',
          component: page0100, //Component name doesn't matter, as long as it is consistent with the name after import above
          children: [
            {
              path: 'page01-a',
              name: 'Page01A',
              component: Page01A
            },
            
          ]
        }
      ]
    }
  ]
})

Two points should be noted here: I. The difference between parallel routing and nested routing.

II '/' is the default di'z address. No need to add '/' to the routing configuration of child sub routes

Tags: Vue npm Webpack

Posted on Mon, 03 Feb 2020 09:27:33 -0800 by texhead