Vue.js 生态之 Vue-Router

vue-router 是 Vue的路由系统，定位资源的，我们不可以进行整页刷新去切换页面内容。

vue-router的安装和基本配置

vue-router.js 可以下载也可以用cdn的，配置信息如下

// html 代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="../js/router_demo.js"></script>
// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `<div><h1>首页</h1></div>`
        }
    },
    {
        path: "/about",
        component: {
            template: `<div><h1>关于我们</h1></div>`
        }
    }
]

var router = new VueRouter({
    routes: routes,
    // 路由去掉#
    // mode: 'history',
});

var app = new Vue({
    el: '#app',
    router: router,
});

路由的一些方法

路由传参以及获取参数

// html 代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/琴女?age=20">琴女</router-link>
        <router-link to="/user/提莫">提莫</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
// js 代码
var routes = [
    {
        path: "/",
        component: {
            template: `<div><h1>首页</h1></div>`
        }
    },
    {
        path: "/about",
        component: {
            template: `<div><h1>关于我们</h1></div>`
        }
    },
    {
        path: "/user/:name",
        component: {
            template: `<div>
                      <h1>我是:{{$route.params.name}}</h1>
                      <h1>我年龄是:{{$route.query.age}}</h1>
                    </div>`,
        }
    }
]

var router = new VueRouter({
    routes: routes,
});

var app = new Vue({
    el: '#app',
    router: router,
});

命名路由

// html代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link :to="{name: 'about'}">关于我们</router-link>
        <router-link to="/user/gaoxin?age=19">gaoxin</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
// js代码
let routes = [
        {
            path: '/',
            component: {
                template: `<h1>这是主页</h1>`
            }
        },
        {
            path: "/about",
            name: "about",
            component: {
                template: `<h1>关于我们</h1>`
            }
        },
        {
            path: "/user/:name",
            component: {
                template: `<div>
                            <h1>我是{{$route.params.name}}</h1>
                           <h2>我的年龄是{{$route.query.age}}</h2>
                            </div>
                          `
            }
        }
    ];

    let router = new VueRouter({
        routes: routes,
        mode: "history"
    });

    const app = new Vue({
        el: "#app",
        router: router,
        mounted(){
            console.log(this.$route)
            console.log(this.$router)
        }
    })

子路由

// 添加子路由变化的只有父级路由 
// 基于上面的例子增加
// js 代码
{
        path: "/user/:name",
        component: {
            template: `<div>
                      <h1>我是:{{$route.params.name}}</h1>
                      <h1>我年龄是:{{$route.query.age}}</h1>
                      <router-link to="more" append>更多信息</router-link>
                      <router-view></router-view>
                    </div>`,
        },
        children: [
            {
            path: "more",
            component: {
                template: `<div>
                      {{$route.params.name}}的详细信息
                </div>`,
            }
        }
        ]

    },

手动访问路由，以及传参

// 基于上面例子追加
// html 代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/琴女?age=20">琴女</router-link>
        <router-link to="/user/提莫">提莫</router-link>
        // 添加一个button按钮
        <button @click="on_click">旅游</button>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>    
// js 代码
// 注意路由name的使用 这是在原例子追加
var app = new Vue({
    el: '#app',
    router: router,
    methods: {
        on_click: function () {
            setTimeout(function () {
                this.$router.push('/about')
                setTimeout(function () {
                    this.$router.push({name: "user", params:{name: "琴女"},query:{age: 20}})
                }, 2000)
            }, 2000)
        }
    }
});

命名路由视图 router-view
当我们只有一个<router-view></router-view>的时候_{所有内容都展示在这一个面板里面}

如果是content 和 footer 就需要同时显示并且不同区域~这就需要对视图进行命名

// html 代码
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        
    </div>
    <div>
        <router-view name="content" class="content-view"></router-view>
        <router-view name="footer" class="footer-view"></router-view>
    </div>

</div>
// js 中的主要代码
var routes = [
    {
        path: "/",
        components: {
            content: {
                template: `<div><h1>首页</h1></div>`,
            },
            footer: {
                template: `<div><h1>关于我们</h1></div>`,
            }
        }
    },
]

错误路由的重定向

let routes = [
     {
            path: "**",
            redirect: "/"
        }   
]

$route以及$ router的区别~~

-- $route为当前router调转对象，里面可以获取name, path, query, params等~

-- $router为VueRouter实例，有$ router.push方法等~~

路由的钩子

路由的生命周期就是从一个路由跳转到另一个路由整个过程。下面介绍两个钩子函数：
router.beforeEach()
router.afterEach()

路由钩子：

// html 代码
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/login">登录</router-link>
    <router-link to="/user">用户管理</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>
//  js 代码
var routes = [
    {
        path: "/",
        component: {
            template: "<h1>首页</h1>"
        }
    },
    {
        path: "/login",
        component: {
            template: "<h1>登录</h1>"
        }
    },
    {
        path: "/user",
        component: {
            template: "<h1>用户管理</h1>"
        }
    }
];
var router = new VueRouter({
    routes: routes
});

router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.path=="/user"){
        next("/login")
    }
    else {
        next();
    }
});
router.afterEach(function (to, from) {
    console.log(to)
    console.log(from)
});

var app = new Vue({
    el: '#app',
    router: router
});

next 参数详解

next：function 一定要调用这个方法来resolve这个钩子函数。
执行效果依赖next方法的调用参数
next() 什么都不做继续执行到调转的路由
next(false) 中断当前导航没有跳转也没有反应
next("/") 参数是路径调转到该路径
next(error) 如果next参数是一个Error实例导航终止该错误
会传递给router.onError()注册过的回调中

匹配子路由以及元数据配置

// 匹配子路由 改一下匹配方法就可以~
// js 改动代码
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.matched.some(function (item) {
            return item.path == "/post"
        })){
        next("/login")
    }
    else {
        next();
    }
});
// 元数据配置 改动代码
// html 部分
 {
        path: "/user",
        meta: {
            required_login: true,
        },
        component: {
            template: `
                <div>
                <h1>用户管理</h1>
                <router-link to="vip" append>vip</router-link>
                <router-view></router-view>
                </div>
                `
        },
        children: [{
            path: "vip",
            meta: {
              required_login: true,
            },
            component: {
                template: '<h1>VIP</h1>'
            }
        }]
    }
// js 部分
router.beforeEach(function (to,from,next) {
    // console.log(to)
    // console.log(from)
    // console.log(next)
    // next(false)
    if(to.meta.required_login){
        next("/login")
    }
    else {
        next();
    }
});

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 193,968评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,682评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,254评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,074评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 60,964评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,055评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,484评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,170评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,433评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,512评论 2赞 308
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,296评论 1赞 325
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,184评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,545评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,880评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,150评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,437评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,630评论 2赞 335

Vue.js 生态之 Vue-Router

vue-router的安装和基本配置

路由的一些方法

路由的钩子

推荐阅读更多精彩内容