Vue.js核心技术解析与uni-app跨平台实战开发学习笔记第6章 Vue.js路由 6.1 什么是路由 && 6.2 路由控制组件切换

Vue.js核心技术解析与uni-app跨平台实战开发学习笔记

第6章 Vue.js路由

文章目录

6.1 什么是路由

路由就是URL地址，地址不同，则显示的页面内容不同，路由分为前端路由和后端路由，Vue属于前端框架，以下所说的路由都指前端路由。

Vue属于单页面应用程序，通过hash(#)来实现不同页面之间的切换。

单页面程序就是不需要刷新页面，所有组件都在一个页面上的应用程序。

6.1.1 安装路由

路由的安装方式有两种：cdn和npm

Vue Router官网的cdn

https://router.vuejs.org/zh/installation.html

在这里插入图片描述

6.1.2 使用路由

在页面中使用路由，5步：

引入路由
创建路由实例对象
为构造函数传递配置对象
将路由挂载到Vue实例对象
视图层显示组件内容

举个栗子

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app" v-cloak>
    <router-view>router-view>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js">script>

<script>
    var login = {
        template : '登录
'
    }
    //创建路由示例对象
    var router = new VueRouter({
        routes : [{
            path : '/login',
            component : login
        }]
    })

    var vm = new Vue({
        el : '#app',
        data : {

        },
        methods : {

        },
        components : {

        },
        //将路由挂载到实例对象
        router : router
    })


script>
body>
html>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

在这里插入图片描述

6.2 路由控制组件切换

创建登录组件和注册组件，实现组件之间的切换

6.2.1 使用a标签进行路由跳转

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<div id="app" v-cloak>
    <a href="#/login">登录a>
    <a href="#/register">注册a>
    <router-view>router-view>
div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js">script>

<script>

    //登录组件和注册组件
    var login = {
        template : '登录
'
    }
    var register = {
        template: '注册
'
    }
    //创建路由示例对象及路由匹配规则
    var router = new VueRouter({
        routes : [{
            path : '/login',
            component : login
        },{
            path: '/register',
            component: register
        }
        ]
    })

    var vm = new Vue({
        el : '#app',
        data : {

        },
        methods : {

        },
        components : {
            login,
            register
        },
        //将路由挂载到实例对象
        router : router
    })


script>
body>
html>
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60