vue npm安装及路由

(一)安装vue

  npm install -g @vue/cli   //安装一次就可以 
  vue create 项目名称
  cd 项目名称
  npm run serve

(二)配置 vue.config.js (关闭保存代码错误提示)

module.exports = {
	lintOnSave: false
}

(三)安装element (这步可以省略,跟路由没啥关系)

vue add element

(四)安装vue-router(路由)

第一步

npm install vue-router --save

第二步

• src下新建一个router.js
• 视图文件都要放在views

import Vue from "vue"
import Router from "vue-router"

Vue.use(Router)

export default new Router({
	routers:[
        {
            path:'/',
            name:'layout',
            component:()=>import('./views/layout.vue'),
            children:[
                {
                    path:'/index',
            		name:'index',
            		component:()=>import('./views/index/index.vue')
                }
            ]
        },
        {
            path:'/login',
            name:'login',
            component:()=>import('./views/login/index.vue')
        }
    ]
})

第三步

• 在main.js引入router.js

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

Vue.config.productionTip = false

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

vue-router二次封装

• 第一步
  src下新建一个common下在新建一个config文件夹下新建一个router.js文件
• 第二步
  更目录下的router.js文件里面的，routers数组剪切出来,留下routers

export default new Router({
	<!---routers数组剪切出来,留下routers---->
	routers
})

• config下的router.js

let routers = [
        {
            path:'/',
            name:'layout',
            redirect:{name:index}  //默认跳转到index
            component:()=>import('../../views/layout.vue'),
            children:[
                {
                    path:'/index',
            		name:'index',
            		component:()=>import('../../views/index/index.vue')
                }
            ]
        },
        {
            path:'/login',
            name:'login',
            component:()=>import('../../views/login/index.vue')
        },
        {
            //重定向  没有路径跳转index
            path:'*',
            redirect:{name:index}
        }
    ]
export default routers

• 更目录下的router.js

import Vue from "vue"
import Router from "vue-router"

//引入config下的router.js
import routers from "./common/config/router.js"

Vue.use(Router)

export default new Router({ routers })

再次简化Vue-touter路由

• 第一步

let routers = [
    {
        path:'/',
        name:'layout',
        redirect:{name:index}  //默认跳转到index
        component:'layout',
        children:[
            {
                //path:'/index',
                //name:'index',
                component:'index/index'
            },
    		{
                //path:'shop/goods/list',
                //name:'shop_goods_list',
                component:'index/index'
            }
        ]
	},
    {
        //path:'/login',
        //name:'login',
        component:'login/index'
    },
    {
        //重定向  没有路径跳转index
        path:'*',
        redirect:{name:index}
    }
]

function getRoutes (){
	//自动生成路由
    createRoute(routers)
    return routes
}

//自动生成路由
function createRoute (arr){
    for (let i = 0; i < arr.length; i++){
        if(!arr[i].component) return
        //如果结尾是index的话去掉index
        let val = getValue(arr[i].component)
        //生成name
        arr[i].name = arr[i].name || val.replace(/\//g,'_')
        //生成path
        arr[i].path = arr[i].path || `/${val}`
        //自动生成  component  
        let componentFun = import(`../../view/${arr[i].component}.vue`)
        arr[i].component = ()=>componentFun
        if(arr[i].children && arr[i].children.lenght > 0){
            createRoute(arr[i].children)
        }
    }
}
function getValue(str){
    // str = login/index
    //获取最后一个/的索引
    let val = str.lastIndexOf('/')
    //获取最后一个/后面的值
    let val = str.substring(index+1,str.length)
    //判断是不是index结尾
    if(val === 'index'){
       return str.substring(index,-1)
    }
    return str
}
export default routers