专栏首页菜鸟计划vue-router详解——小白速会

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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • javascript简史

    一、javascript简介 1.1 javascript简史 javascript诞生于1995年。当时它的主要目的是处理以前由服务器端语言负责的一些输入验证...

    柴小智
  • CSS布局(一) 盒子模型基础

    一、盒子模型 标准盒子模型  从下图可以看到标准 w3c 盒子模型的范围包括 content、padding、border、margin,并且 content ...

    柴小智
  • vue内置指令详解——小白速会

    指令 (Directives) 是带有 v- 前缀的特殊属性,职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。 内置指令 1、v-bin...

    柴小智
  • vue 路由组件

    单页应用(single page web application,SPA),是在一个页面完成所有的业务功能,浏览器一开始会加载必需的HTML、CSS和JavaS...

    章鱼喵
  • vueRouter-编程式的导航 原

    除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。 router.push(locatio...

    tianyawhl
  • Vue.js学习系列一 —— vue-router2学习实践笔记(附DEMO)

    执行命令完成vue-router的安装,并在package.json中添加了vue-router的依赖。当我们在其他电脑上安装项目时只需要执行npm insta...

    前端博客 : alili.tech
  • vue之vue-router实例

    本文转自: https://www.cnblogs.com/SamWeb/p/6610733.html

    开发架构二三事
  • vue-router基本使用

    大当家
  • 前端基础-Vue.js单页应用

    优缺点都很明显,但是我们都还没尝试过就来评价,就会显得空口无凭;接下来我们先来学习制作单页应用,然后再来进行点评;

    cwl_java
  • 遇到 Loading chunk {n} failed问题不要慌

    报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败。但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性...

    w候人兮猗

扫码关注云+社区

领取腾讯云代金券