Vue学习笔记03--Vue中路由的使用

Vue提供了一个单独的路由组件VueRoute，这个组件使用起来还是比较麻烦的。

路由页面的嵌套关系如下图：

 

1.定义路由配置文件router.js：

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

import Login from './components/4_路由使用方式/login.vue'
import LoginQQ from './components/4_路由使用方式/loginqq.vue'
import LoginPhone from './components/4_路由使用方式/loginphone.vue'
import Reg from './components/4_路由使用方式/reg.vue'

Vue.use(Router)

var router = new Router({
    routes:[
        {
            path: '/',
            component: Login
        },
        {
            path: '/login',
            component:Login,
            children:[
                {
                    path:'qq',
                    component:LoginQQ
                },
                {
                    path:'phone',
                    component: LoginPhone
                }
            ]
        },
        {
            path:'/reg',
            component: Reg
        }
    ]
})

export default router

代码说明：

第1行引入Vue核心包。

第2行引入VueRoute包。

第9行通过Vue.use()将VueRoute加载到Vue中。

第11到36行，定义路由规则，其中22行的qq路由以及26行的phone路由，都是login路由的子路由。

 

2.将路由配置文件加载到Vue中，修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js'

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

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

代码说明：

第1行导入Vue

第2行导入主页模块App

第3行导入路由定义（上一步编写的router.js文件）

第10行，将router文件添加到Vue实例中。

 

3.定义组件

　　3.1 定义loginqq.uve

<template>
    <div>
        登录方式一：使用QQ登录
    </div>
</template>

<script>
    export default {
        name: "loginqq"
    }
</script>

<style scoped>

</style>

 

　　3.2定义loginphone.vue

<template>
    <div>
        登录方式二：使用手机号码登录
    </div>
</template>

<script>
    export default {
        name: "loginphone"
    }
</script>

<style scoped>

</style>

 

　　3.3定义login.vue

<template>
    <div>
        <div>登录组件</div>
        <router-link to="/login/qq">使用QQ登录</router-link>
        <router-link to="/login/phone">使用电话号码登录</router-link>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "login"
    }
</script>

<style scoped>

</style>

 

　　3.4定义reg.vue

<template>
    <div>注册组件</div>
</template>

<script>
    export default {
        name: "reg"
    }
</script>

<style scoped>

</style>

 

　　3.5定义主页面App.vue

<template>
  <div id="app">
    <div>路由使用</div>
    <router-link to="/login">登录</router-link>
    <router-link to="/reg">注册</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

 

总结：VueRoute只适合处理比较简单的布局，对于复杂的布局，尽量不要使用，否则就是自寻烦恼，甚至会“引火烧身”。