vue-router详解——小白速会

时间 2020-05-22

标签 vue router 详解繁體版

原文原文链接

1、概述html

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

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

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

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

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

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

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

这时router 就起做用了，它到routes 中去查找，去找到对应的 home 内容，因此页面中就显示了 home 内容。组件化

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

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