zoukankan      html  css  js  c++  java
  • Vue之路由的使用

    零、传统路由与SPA的区别

    • 传统开发方式下,URL改变后,就会立刻发生请求去请求整个页面,这样可能请求加载的资源过多,可能会让页面出现白屏。
    • 在SPA(Single Page Application)单页面应用下,当锚点值改变后,不会立刻发生请求,而是在某个合适的时机,发起ajax请求,实现局部改变页面的数据。优点是:不是整个页面发生跳转,那么用户的体验就更好了。

    一、vue-router的使用

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        <div id="app">
        </div>
    
        <!-- 1. 先引入vue.js(被vue-router所依赖)-->
        <script src="../node_modules/vue/dist/vue.js"></script>
        <!-- 2. 再引入插件vue-router(使用npm install vue-router --save安装到相应的文件夹下)-->
        <script src="../node_modules/vue-router/dist/vue-router.js"></script>
        <script>
    
        /* 演示示例:页面里有2个a标签,注册和登录,点击注册、登录返回不同的内容,
        且有公共内容(主页公共数据),来实现局部页面的跳转且URL要发生相应的改变。
        */
    
        // 3. 让vue使用VueRouter创建(某些情况下可以不用,这里暂且加上)
        Vue.use(VueRouter);
    
        // 声明使用了路由的组件
        var Login = {
            template: `
            <div>我是登录页面</div>
            `
        };
    
        var Register = {
            template: `<div>我是注册页面</div>`,
        };
    
        // 4. 创建VueRouter对象
        var router = new VueRouter({
            // 5. 配置路由对象的规则如匹配路径、组件等
            routes: [
                {
                    path: '/login',
                    component: Login
                },
                {
                    path: '/register',
                    component: Register
                }
            ]
    
        });
    
        // 当使用了vue-router后就会抛出两个全局的组件:router-link、router-view
        // router-link相当于a标签,router-view是路由组件渲染的出口
    
    
        // 声明入口组件App
        var App = {
            template: `
                <div>
                    我是公共内容<br/>
                    <router-link to='/login'>登录</router-link>
                    <router-link to='/register'>注册</router-link>
    
                    <router-view></router-view>
                </div>
            `,
        };
    
     
        new Vue({
            el: '#app',
            // 5. 将配置后的路由对象关联到vue实例化对象中
            router: router,
            template: `<App />`,
            components: {
                App
            }
        });
    
        </script>
    </body>
    </html>
    

    命名路由

    路由也可以拥有自己的名字,上面的例子也可以改写为下面:

          routes: [
                {
                    path: '/login',
                    name: 'login',
                    component: Login
                },
                {
                    path: '/register',
                    name: 'register',
                    component: Register
                }
            ]
    ...
    
       <router-link :to='{name:"login"}'>登录</router-link>
       <router-link :to='{name:"register"}'>注册</router-link>
    

    路由参数

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
    
        <div id="app">
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script src="../node_modules/vue-router/dist/vue-router.js"></script>
        <script>
    
        /*
        路由参数的使用:常见的路由范式有以下2种:
        - xxx.html/user/1    params 动态路由参数(restful风格)
        - xxx.html/user?userId=1  query 查询参数
        */
        Vue.use(VueRouter);
    
        // 声明使用了路由的组件
        var Login = {
            template: `
            <div>我是登录页面</div>
            `
        };
    
        var Register = {
            template: `<div>我是注册页面</div>`,
        };
    
        var router = new VueRouter({
            routes: [
                {
                    // 动态路由参数以冒号开头
                    path: '/login/:id',
                    name: 'login',
                    component: Login
                },
                {
                    // query参数在这里不做修改
                    path: '/register',
                    name: 'register',
                    component: Register
                }
            ]
    
        });
    
        // 声明入口组件App
        var App = {
            template: `
                <div>
                    我是公共内容<br/>
                    <router-link :to = "{name:'login',params:{'id':1}}">登录params</router-link>
                    <router-link :to = "{name:'register',query:{'userId':2}}">注册query</router-link>
    
                    <router-view></router-view>
                </div>
            `,
        };
    
     
        new Vue({
            el: '#app',
            router: router,
            template: `<App />`,
            components: {
                App
            }
        });
    
        </script>
    </body>
    </html>
    

    二、嵌套路由、动态路由

    掘金就是由vue写的,接下来的这个demo会模仿掘金首页的构成,实现嵌套路由、动态路由匹配功能。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>掘金</title>
    </head>
    <body>
        <div id="app">
    
        </div>
    
        <script src="../node_modules/vue/dist/vue.js"></script>
        <script src="../node_modules/vue-router/dist/vue-router.js"></script>
        <script>
        
        Vue.use(VueRouter);
    
        //第二层路由组件,实现了嵌套的路由组件
        // 这一层的三个路由组件:推荐、后端、前端可以看成结构是相同的,只有数据不同
        // 所以为了提高代码的复用性,就需要采用动态路由匹配的方式,及只创建一个组件,然后替换里面的数据
        var Home = {
            template: `
                <div>
                <router-link :to="{name:'category', params:{category:'recommened'}}">推荐</router-link>
                <router-link :to="{name:'category', params:{category:'backend'}}">后端</router-link>
                <router-link :to="{name:'category', params:{category:'fronted'}}">前端</router-link>
    
                <router-view></router-view>
    
                </div>
            `
        };
    
        var Pins = {
            template: `<div>我是沸点</div>`
        };
    
        var Topics = {
            template: `<div>我是话题</div>`
        };
    
        // 创建一个组件,然后使用动态路由匹配的方式
        var Commons = {
            data() {
                return {
                    msg: 'recommened'
                }
            },
            template: `
                <div>
                 我是 {{ msg }}
                </div>
            `,
            watch: {
                // 利用watch侦听器来监听$route来检测动态路由的切换
                '$route' (to, from) {
                    console.log(to.params.category);
    
                    // 模拟路由的变化引起的数据的变化
                    this.msg = to.params.category;
                }
            }
        };
        
        var router = new VueRouter({
            routes: [
                {
                    path: '/',
                    component: Home,
                    // 嵌套路由的写法:
                    children: [
                        {
                            path: 'welcome/:category',
                            name: 'category',
                            component: Commons
                        }
                    ]
                },
                {
                    path: '/pins',
                    component: Pins
                },
                {
                    path: '/topics',
                    component: Topics
                }
            ]
        });
        
        // 第一层路由组件包括首页、沸点、话题等
        var FRouter = {
            template:`
                <div>
                    第一层路由组件
                    <router-link to="/">首页</router-link>
                    <router-link to="/pins">沸点</router-link>
                    <router-link to="/topics">话题</router-link>
    
                    <router-view></router-view>
                </div>
            `
    
        };
    
    
        new Vue({
            el: '#app',
            router: router,
            template: '<FRouter />',
            components: {
                FRouter
            }
        });
        </script>
    </body>
    </html>
    
  • 相关阅读:
    Java多线程:ThreadLocal
    selenium安装环境
    http常用标签
    http与https区别,get与post请求区别
    测试评审清单
    python面向对象之方法
    python正则之模式re.I re.M
    python 正则之字母匹配
    python正则之特殊表达式 .*?{}
    python正则之match search findall
  • 原文地址:https://www.cnblogs.com/yunche/p/11099404.html
Copyright © 2011-2022 走看看