玖叶教程网

本文章主要介绍 @vue/cli 使用路由router,状态机vuex,sass, elementUi饿了么组件 的安装以及使用时注意事项

• 安装

1.npm install vue-router

2.npm install vuex --save

3.npm install -D sass-loader node-sass

4.npm i element-ui -S

vue add element

• 相应的代码文件修改：

1.main.js中render页面时使用router属性

文件路径: src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: 'index'
    },
    {
      path: '/index',
      name: 'index',
      redirect: 'homepage'
    },
    {
      path: '/homepage',
      name: 'homepage',
      component: () => import('@/pages/Main'),
      children: [
        {path: '', component: () => import('@/components/content/middle/components/Test1')}
      ]
    }
  ]
})

2.src/main.js

import Vue from 'vue'
import vuex from 'vuex'
import App from './App.vue'
import './plugins/element.js'
import router from './router'

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

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

3.src/App.vue中配置顶层的router-view

<template>
  <div id="root">
    <!-- <img alt="Vue logo" src="./assets/logo.png"> -->
    <router-view/>
  </div>
</template>

小总结：

1.当然如果不想将第一层的router-view写在App.vue文件里面的话，也可以写在别的文件里面。

2.根路径 '/' 直接指向的是main.js中render的组件(页面)。

3.vue-router实例中的routes属性，配置的都是children, 包括第一层数组也是children，属性名是routes。所以对于第一层的router-view可以有多个页面，就是通过第一层数组中的不同的path+component来配置

4.vue-router实例中的routes属性中的children中的每个对象，都可以再拥有自己的children。

github repo link: ?https://github.com/mxlgsq/vue3-demo.git