zoukankan      html  css  js  c++  java
  • vue-router详解——小白速会

    一、概述

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用

    vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。

    而传统的多页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。

    路由中有三个基本的概念 route, routes, router。

    1. route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮  => home内容, 这是一条route,  about按钮 => about 内容, 这是另一条路由。

    2. routes 是一组路由,把上面的每一条路由组合起来,形成一个数组。[{home 按钮 =>home内容 }, { about按钮 => about 内容}]

    3. router 是一个机制,相当于一个管理者,它来管理路由。因为routes 只是定义了一组路由,它放在哪里是静止的,当真正来了请求,怎么办? 就是当用户点击home 按钮的时候,怎么办?

    这时router 就起作用了,它到routes 中去查找,去找到对应的 home 内容,所以页面中就显示了 home 内容。

    4. 客户端中的路由,实际上就是dom 元素的显示和隐藏。当页面中显示home 内容的时候,about 中的内容全部隐藏,反之也是一样。客户端路由有两种实现方式:基于hash 和基于html5 history api.

    二、vue-router基本用法

    在vue中实现路由还是相对简单的。因为我们页面中所有内容都是组件化的,我们只要把路径和组件对应起来就可以了,然后在页面中把组件渲染出来。

    2.1 一个简单的单页应用

    直接来看一个demo:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue-router</title>
    </head>
    <body>
        <div id="app">
            <header>
                <router-link class="red" to="/home">Home</router-link>  //用于跳转
                <router-link to="/about">About</router-link>
                <!--  增加两个到user组件的导航,展示动态路由,可以看到这里使用了不同的to属性 -->
                <router-link to="/user/123">User123</router-link>
                <router-link to="/user/456">User456</router-link>
            </header>
            <router-view></router-view>  //用于被替换渲染
        </div>
    </body>
    </html>
    <script src="../lib/vue.js"></script>
    <script src="../lib/vue-router.js"></script>
    <script src="../js/demo1.js"></script>
    //1.创建组件
    var Home = Vue.extend({
        template: '<div>' +
                        '<h1>Home</h1>' +
                        '<p>{{msg}}</p>' +
                  '</div>',
        data: function() {
            return {
                msg: 'Hello, vue router!'
            }
        }
    });
    
    var About = Vue.extend({
        template: '<div>' +
                    '<h1>About</h1>' +
                    '<p>This is the tutorial about vue-router.</p>' +
                 '</div>'
    });
    
    var User = Vue.extend({  //展示动态路由
        template: '<div>' +
                    '<h1>User</h1>' +
                    '<p>我是user组件,动态部分是{{dynamic}}</p>' +
                  '</div>',
        computed: {
            dynamic: function () {
                //当整个vue-router 注入到根实例后,在组件的内部,可以通过this.$route来获取到router实例。它有一个params 属性,就是来获得这个动态部分的。
                return this.$route.params.id
            }
        },
        watch: {
            //利用watch来监听$route的变化,可以进行更多的操作。to表示的是你要去的那个组件,from 表示的是你从哪个组件过来的,它们是两个对象。
            $route: function (to, from) {
                console.log(to),
                console.log(from)
            }
        }
    });
    
    //2.创建router,并映射路由;
    var router = new VueRouter({
        routes: [
            {
                path: '/home',     //映射路径
                component: Home    //映射组件
            },
            {
                path: '/about',
                component: About
            },
            {
                path: '/user/:id',      //配置动态的id,实现动态路由
                component: User
            },
            {
                path: '/',
                redirect: '/home'   // 默认重定向
            }
        ]
    });
    
    //3.把创建好的路由挂载在根组件下面就可以了,即挂载到#app元素下面
    const app = new Vue({
        router
    }).$mount('#app');
    
    //4.使用标签<router-link> ,<router-link> 有一个非常重要的属性 to,定义点击之后,要到哪里去
    //5.使用<router-view>标签: 在页面上使用<router-view></router-view>标签,它用于渲染匹配的组件。

     

    2.2嵌套路由

    嵌套路由,主要是由我们的页面结构所决定的。当我们进入到home页面的时候,它下面还有分类,如手机系列,平板系列,电脑系列。当我们点击各个分类的时候,它还是需要路由到各个部分,如点击手机,它肯定到对应到手机的部分。

    在路由的设计上,首先进入到 home ,然后才能进入到phone, tablet, computer.  Phone, tablet, compute 就相当于进入到了home的子元素。所以vue  提供了children属性,它也是一组路由,相当于我们所写的routes。

    我们把上面的Demo简单修改一下:html页面不动,只是简单改一些js的部分

    var Home = Vue.extend({
        template: '<div>' +
                        '<h1>Home</h1>' +
                        '<p>{{msg}}</p>' +
                        '<p>'+
                            '<router-link to="/home/phone">手机 </router-link>'+      //加入子路由跳转方式
                            '<router-link to="/home/tablet">平板 </router-link>'+
                            '<router-link to="/home/computer">电脑 </router-link>'+
                        '</p>'+
                        '<router-view></router-view>'+    //在父页面的里面加入子路由页面,用于子路由页面的替换和渲染
                  '</div>',
        data: function() {
            return {
                msg: 'Hello, vue router!'
            }
        }
    });
    
    // 子路由组件
    var phone = Vue.extend({
        template: '<div>This is phone</div>'
    });
    
    var tablet = Vue.extend({
        template: '<div>This is tablet</div>'
    });
    
    var computer = Vue.extend({
        template: '<div>This is computer</div>'
    });
    
    var router = new VueRouter({
        routes: [
            {
                path: '/home',     //映射父页面路径
                component: Home,    //映射父组件
                children: [    //利用children属性实现子路由
                    {
                        path: "phone",  //映射子路由页面路径
                        component: phone  //映射子组件
                    },
                    {
                        path: "tablet",
                        component: tablet
                    },
                    {
                        path: "computer",
                        component: computer
                    },
                    // 当进入到home时,下面的组件显示
                    {
                        path: "",
                        component: phone
                    }
                ]
            },
            {
                path: '/about',
                component: About
            },
            {
                path: '/user/:id',      //配置动态的id,实现动态路由
                component: User
            },
            {
                path: '/',
                redirect: '/home'   // 默认重定向
            }
        ]
    });

    2.3命名路由

    命名路由,很简单,因为根据名字就可以知道,这个路由有一个名字,那就直接给这个路由加一个name 属性,就可以了。 给user 路由加一个name 属性:

            {
                name: 'user',
                path: '/user/:id', 
                component: User
            },

    命名路由的使用, 在router-link 中用动态的to属性就可以使用对象了

                <router-link to="/user/123">User123</router-link>
                <router-link :to="{name:'user',params: {id:456}}">User456</router-link>
           //这两个是等价的,当使用对象作为路由的时候,to前面要加一个冒号,表示绑定

    2.4跳转

    vue-router 有两种跳转页面的方法

    第一种是使用内置的<router-link>组件,它会被渲染为一个<a>标签,如:

    <router-link to="/home">Home</router-link>

    < router-link>除了to还有其他的一些属性, 常用的有:

    • tag
    tag 可以指定渲染成什么标签,比如<router-link to = "/about ” tag=” li ”〉渲染的结果就是<li >而不是<a>。

    • replace
    使用replace 不会留下History 记录,所以导航后不能用后退键返回上一个页面,如<router-link to =”/about” replace>。

    • active-class
    当<router-link> 对应的路由匹配成功时,会自动给当前元素设置一个名为router-link-active的class,如需要修改样式,直接修改router-link-active就可以.

     有时候,跳转页面可能需要在JavaScript 里进行,类似于window. location.href。这时可以用第二种跳转方法,使用router 实例的方法。

    以demo中的about为例:

    var About = Vue.extend({
        template: '<div>' +
                    '<h1>About</h1>' +
                    '<p>This is the tutorial about vue-router.</p>' +
                    '<button @click="handleRouter">返回home页</button>'+  //在about页面增加一个跳转按钮
                 '</div>',
        methods: {
            handleRouter: function () {
                this.$router.push('/home')  //使用$router中的push方法就行路由跳转
            }
        }
    });
    $router 还有其他一些方法:
    • replace
    类似于<router-link>的replace 功能,它不会向history 添加新记录,而是替换掉当前的history 记录,如this.$router.replace (’/user/123'); 。
    
    • go
    类似于window.history.go(),在history 记录中向前或者后退多少步,参数是整数,例如:
    //后退1 页
    this.$router.go(-1) ;
    //前进2 页
    this.$router.go(2);
  • 相关阅读:
    Vasya and Endless Credits CodeForces
    Dreamoon and Strings CodeForces
    Online Meeting CodeForces
    数塔取数 基础dp
    1001 数组中和等于K的数对 1090 3个数和为0
    1091 线段的重叠
    51nod 最小周长
    走格子 51nod
    1289 大鱼吃小鱼
    POJ 1979 Red and Black
  • 原文地址:https://www.cnblogs.com/chaixiaozhi/p/8836306.html
Copyright © 2011-2022 走看看