6. vue-router的使用

本节内容

　　一、介绍

　　二、官网简单操作及示例

一、介绍

vue就是我们前面学习的vue基础，vue + vue-router 主要用来做SPA(Single Page Application)，单页面应用

为什么要使用单页面应用呢？因为传统的路由跳转，如果后端资源过多，会导致页面出现'白屏现象'，所以我们

希望让前端来做路由，在某个生命周期的钩子函数中，发送ajax来请求数据，进行数据驱动，之前比如我们用

django的MTV模式，我们是将后端的数据全部渲染给了模板，然后模板再发送给前端进行浏览器页面的渲染，

一下将所有的数据都给了页面，而我们现在使用vue，我可以在组件的钩子函数中发送对应的ajax请求去获取对

应的数据，而不是裤衩一下子就把数据都放到页面上了，单页面应用给我们提供了很多的便利，说起来大家可

能没有什么切实的体会，来，给大家推荐一个稀土掘金网站，这个网站就是一个单页面应用，是一个开发者

技术社区网站，里面的资源会有很多，看样子：

这样的网站我们通过django是可以来完成页面的渲染的，模板渲染嘛，但是这个论坛的数据资源有很多，

我们通过django的MTV模式是一下子就将数据全部放到页面里面了，那么页面通过浏览器渲染的时候，

浏览器可能没有那么快渲染出来，会出现几秒钟的白屏现象，也就是说几秒钟之后用户才看到页面的内容

，这样体验起来就不好，为了用户体验好，就用到了我们说的单页面应用，django模板渲染做大型应用

的时候，也就是页面很复杂，数据量很大的页面的时候，是不太合适的，当然如果你够nb，你也可以优

化，但是一般它比较适合一些页面数据比较小的应用。那么解释一下什么是单页应用，看下图：(react、

angular也都是做单页面应用，很多大型的网站像网易云音乐，豆瓣等都是react写的单页面应用)

vue + vue-router就是完成单页面应用的，vue-router(路由)是vue的核心插件

下面我们来下载一下vue-router，文档地址，

下载vue-router的cnd链接地址：https://unpkg.com/vue-router/dist/vue-router.js

二、官网简单操作及示例

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义 (路由) 组件。
// 下面两个组件可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            background-color: green;
        }
    </style>
</head>
<body>

<div id="app">

    <App></App>

</div>


</body>
<script src="../vue.js"></script>
<script src="../axios.js"></script>
<script src="../vue-router.js"></script>

<script>


    let Person = {
        data() {
            return {
                msg: '我是person组件',

            }
        },

        template:
            `
            <div class="c1">
                <h3 style="color:#ff0000">{{msg}}</h3>

            </div>
        `,


    }


    let Home = {
        data() {
            return {
                msg: '我是home组件',
                header_num: 99,
            }
        },
        // 写组件的html标签的地方
        template:
            `
            <div class="c1">
                <h3 style="color:#ff0000">{{msg}}</h3>


            </div>
        `
        ,


    };

    let App = {
        data() {
            return {
                app_num: 80,


            }
        },

        //<router-link to=""></router-link>
        //<a href=""></a>

        template:
            `
               <div class="app">
                   <h2>我是app组件</h2>

                    <router-link to="/home">首页</router-link>
                    <router-link to="/person">个人中心</router-link>

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

                    `
        ,

    }

    const routes = [
        {path: '/home', component: Home},
        {path: '/person', component: Person}
    ]

    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    let vm = new Vue({
        el: '#app',
        // data:{}
        data() {
            return {
                // ganmao:'xxx',

            }
        },
        router,
        components: {
            App,
        },


    })

</script>


</html>

示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>
<body>

<div id="app">
    <App></App>
</div>



</body>
<script src="js/vue.js"></script>
<!--<script src="js/vue-router.js"></script>-->
<!-- 注意：测试的时候可能因为你的vue或者vue-router文件有些版本上的冲突问题，导致router-link不能生成a标签，所有建议用下面这两个进行测试，然后再找对应的版本存到本地 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    // import VueRouter from 'node_modules/vue-router/dist/vue-router'
    Vue.use(VueRouter);

    let Home = {
        data(){
            return {
                'msg':'hello home',
            }
        },
        template:`
                <div class="home">
                    {{msg}}

                </div>

        `

    };
    let Course = {
        data(){
            return {
                'msg':'hello course',
            }
        },
        template:`
                <div class="course">
                    {{msg}}

                </div>

        `

    };

    let App = {
        data(){
            return {}
        },
        template:`

            <div>
                <router-link to="/home">首页</router-link>
                <router-link to="/course">课程详情页</router-link>

                <router-view></router-view>

            </div>
        `
    };

    let router = new VueRouter({
       // mode:'history',
        routes:[
            // {path:'/',redirect},
            {path:'/home',component:Home},
            {path:'/course',component:Course},
        ]


    });

    let vm = new Vue({
        el:'#app',
        router,
        data(){
            return {

            }
        },
        // template:`<App></App>`,
        components:{
            App,
        }

    })

</script>
</html>

View Code