By welkin

Updated:

Contents
  1. 1. 1. 在vue组件页面中，集成vue-router路由模块
  2. 2. 2. 结合webpack实现children子路由（路由嵌套）

1. 在vue组件页面中，集成vue-router路由模块

vue-router官网

  1. 导入路由模块：
1
2

import VueRouter from 'vue-router'
  1. 安装路由模块：
1
2

Vue.use(VueRouter);
  1. 导入需要展示的组件:
1
2
3
4

import login from './components/account/login.vue'

import register from './components/account/register.vue'
  1. 创建路由对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14

var router = new VueRouter({

  routes: [

    { path: '/', redirect: '/login' },

    { path: '/login', component: login },

    { path: '/register', component: register }

  ]

});
  1. 将路由对象，挂载到 Vue 实例上:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

var vm = new Vue({

  el: '#app',

  // render: c => { return c(App) }

  render(c) {

    return c(App);

  },

  router // 将路由对象，挂载到 Vue 实例上

});
  1. 改造App.vue组件，在 template 中，添加router-link和router-view：
1
2
3
4
5
6
7
8

<router-link to="/login">登录</router-link>

<router-link to="/register">注册</router-link>



<router-view></router-view>

这一步很容易放在index.html中#app下，这样是错的
注意：

  1. App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: ‘#app’ 所指定的 元素中；
  2. login和register这两个组件 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；

2. 结合webpack实现children子路由（路由嵌套）

这个时候避免代码看起来乱，于是新建一个router.js文件，里面用来储存路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // account  goodslist
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: login },
        { path: 'register', component: register }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router

在main.js中只需要导出router计科

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

// 导入 app 组件
import app from './App.vue'

// 导入 自定义路由模块
import router from './router.js'

var vm = new Vue({
  el: '#app',
  render: c => c(app), 
  // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
  router // 4. 将路由对象挂载到 vm 上
})

  1. 在要嵌套的vue组件中写上router-link
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <template>
      <div>
        <h1>这是 Account 组件</h1>

        <router-link to="/account/login">登录</router-link>
        <router-link to="/account/register">注册</router-link>

        <router-view></router-view>
      </div>
    </template>


    <script>
    </script>

    <style lang="scss" scoped>
    /* 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性 */
    // 只要 咱们的 style 标签， 是在 .vue 组件中定义的，那么，推荐都为 style 开启 scoped 属性
    body {
      div {
        font-style: italic;
      }
    }
    </style>

注意
样式的scoped属性是通过css的属性选择器实现的

Contents
  1. 1. 1. 在vue组件页面中，集成vue-router路由模块
  2. 2. 2. 结合webpack实现children子路由（路由嵌套）