在Webpack4.0+Vue2.5项目中使用vue-router以及设置二级路由


注:本文的项目配置基于 :

Part.1 使用vue-router

首先通过npm安装vue-router

npm install vue-router -S

在views目录下新增两个页面用于切换

<!--index.vue-->
<template>
  <div>
      <h4>这里是首页</h4>
  </div>
</template>

<!--about.vue-->
<template>
  <div>
      <h4>这里是关于页</h4>
  </div>
</template>


在src目录下新建一个router目录用于存放路由配置,新建一个路由配置文件:

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

import Index from '../views/index.vue'
import About from '../views/about.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:Index
        },
        {
            path:'/about',
            component:About
        }
    ]
})

修改App.vue

<template>
  <div>
      <!--router-link 用于切换路由-->
      <router-link to="/">Go to Index</router-link>
      <router-link to="/about">Go to About</router-link>
      
      <!--router-view 用于渲染不同路由组件-->
      <router-view></router-view>
  </p>
  </div>
</template>
<script>
export default {
  
}
</script>

<style lang="scss" scoped>

</style>

最后在main.js引入路由

import Vue from 'vue'
import App from './App.vue'
//引入路由配置
import router from '../router/index.js'


Vue.configproductionTip = false

new Vue({
    el:'#app',
    components:{
        App
    },
    router, //在vue实例中注册路由
    render: (h)=>h(App)
})

更新后的目录如下:

|-- mragon-webpack-vue-demo
    |-- src
        |-- js
            |-- main.js //入口文件
            |-- App.vue //项目根组件
        |--views
            |-- index.html //主页模板
            |-- index.vue  //主页组件
            |-- about.vue  //关于组件
        |--router
            |-- index.js   //路由文件
    |-- webpack.config.js  //webpack配置文件

Part.2 设置二级路由

我们在views目录下新增一个一级路由组件List,以及两个二级路由组件,List1与List2

<!--lsit.vue-->
<template>
  <div>
      <h1>这里是列表页</h1>
      <router-link to="/list/list1">列表1</router-link>
      <router-link to="/list/list2">列表2</router-link>
      
      <!--用于渲染二级路由组建的router-view-->
      <router-view></router-view>
      
  </div>
</template>

<!--lsit1.vue-->
<template>
  <div>
      <h1>这里是列表页1</h1>
  </div>
</template>

<!--lsit2.vue-->
<template>
  <div>
      <h1>这里是列表页2</h1>
  </div>
</template>



然后修改路由配置

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

import Index from '../views/index.vue'
import About from '../views/about.vue'
import List from '../views/list.vue'
import List1 from '../views/list1.vue'
import List2 from '../views/list2.vue'

Vue.use(Router)

export default new Router({
    routes:[
        {
            path:'/',
            component:Index
        },
        {
            path:'/about',
            component:About
        },
        {
            path:'/list',
            component:List,
            children:[
                {    
                    path:'list1', //二级路由的路径无需加斜杠(/)
                    component:List1
                },
                {   
                    path:'list2',
                     component:List2
                }
            ]
        }
    ]
})

更新后的目录如下:

|-- mragon-webpack-vue-demo
    |-- src
        |-- js
            |-- main.js //入口文件
            |-- App.vue //项目根组件
        |--views
            |-- index.html //主页模板
            |-- index.vue  //主页组件
            |-- about.vue  //关于组件
            |-- list.vue   //列表组件
            |-- lsit1.vue  //列表组件的第一个子组件
            |-- list2.vue  //列表组件的第二个子组件
        |--router
            |-- index.js   //路由文件
    |-- webpack.config.js  //webpack配置文件

声明:Mragon|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 在Webpack4.0+Vue2.5项目中使用vue-router以及设置二级路由


Carpe Diem and Do what I like