想要上位的学渣

睁眼写BUG，闭眼改BUG。

Vue-router(路由)

2020.03.02

vue扩展学习

...

Vue 的 路由?

啥玩意?

能让我完成指哪打哪?节省资源!!

咋用的?

1.安装和基本配置

2.传参及获取传参

  • 第一种说不上来的传参方式

    {
        path: '/user/:name',//01
        component: {
            template:`
           <div>
                <h1>我叫:{{$route.params.name}}</h1>
                <h2>我{{$route.query.age}}岁了</h2>
            </div>` ,
        },
    },

  • 第二种 url ? 传参,你懂的

    {
        path: '/user/:name',//01
        component: {
            template:`
           <div>
                <h1>我叫:{{$route.params.name}}</h1>
                <h2>我{{$route.query.age}}岁了</h2>
            </div>` ,
        },
    },
//02:https://localhost:63342/Vue/1002/index.html?_ijt=ea1g8c1v321br19jkvlfrgenub#/user/%E6%9D%8E%E4%BC%A0%E5%8D%95?age=30

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>
                <h2>我{{$route.query.age}}岁了</h2>
            </div>` ,
        },
    },
];

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

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

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/王花花">王花花</router-link>
        <router-link to="/user/李传单">李传单</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>

3.子路由

重点代码

{
        path: '/user/:name',
        component: {
            template:`
           <div>
                <h1>我叫:{{$route.params.name}}</h1>
                <h2>我{{$route.query.age}}岁了</h2>
                <!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
                <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
            </div>` ,
        },
        children: [
            {
                path: 'more',
                component: {
                    template:`
                    <div>
                    用户>>{{$route.params.name}}<<的信息<br>
                    吧嗒吧嗒
                    </div>
                    `
                }
            }
        ]
    },

全部代码

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>
                <h2>我{{$route.query.age}}岁了</h2>
                <!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
                <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
            </div>` ,
        },
        children: [
            {
                path: 'more',
                component: {
                    template:`
                    <div>
                    用户>>{{$route.params.name}}<<的信息<br>
                    吧嗒吧嗒
                    </div>
                    `
                }
            }
        ]
    },
];

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

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

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/王花花">王花花</router-link>
        <router-link to="/user/李传单">李传单</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>

4.手动访问和传参

重点代码

new Vue({
    el: '#app',
    router: router,
    methods: {
        surf: function () {//button的事件
            setTimeout(function () {
                this.router.push('/about');
                setTimeout(function () {
                    //this.router.push('/user/王花花');
                    this.router.push({name:'user',params:{name:'王花花'}});
                    //对象中name 是路由的名字
                },2000)
            },2000)
        }
    }
});

全部代码

var routes = [
    {
        path: '/',
        component: {
           template:`
           <div>
                <h1>首页</h1>
            </div>` ,
        },
    },
    {
        path: '/about',
        component: {
            template:`
           <div>
                <h1>关于我们</h1>
            </div>` ,
        },
    },
    {
        path: '/user/:name',
        name: 'user',//路由名字
        component: {
            template:`
           <div>
                <h1>我叫:{{$route.params.name}}</h1>
                <h2>我{{$route.query.age}}岁了</h2>
                <!--<router-link :to="'/user/'+ $route.params.name +'/more'">更多信息</router-link>-->
                <router-link to="more" append>更多信息</router-link>
                <router-view></router-view>
            </div>` ,
        },
        children: [
            {
                path: 'more',
                component: {
                    template:`
                    <div>
                    用户>>{{$route.params.name}}<<的信息<br>
                    吧嗒吧嗒
                    </div>
                    `
                }
            }
        ]
    },
];

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

new Vue({
    el: '#app',
    router: router,
    methods: {
        surf: function () {//button的事件
            setTimeout(function () {
                this.router.push('/about');
                setTimeout(function () {
                    //this.router.push('/user/王花花');
                    this.router.push({name:'user',params:{name:'王花花'}});
                    //对象中name 是路由的名字
                },2000)
            },2000)
        }
    }
});

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/王花花">王花花</router-link>
        <router-link to="/user/李传单">李传单</router-link>
        <button @click="surf">漫游</button>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>

5.命名视图

也就是视图的命名,代码自悟

var routes = [
    {
        path: '/',
        components: {
            sidebar: {
                template:`
                <div>
                    <h1>首页</h1>
                </div>`,
            },
            content: {

            }
        },
    },
    {
        path: '/user',
        components: {
            sidebar: {
                template:`
           <div>
                <h1>用户管理</h1>
                <ul>
                <li>用户列表</li>
                <li>权限管理</li>
                </ul>
            </div>` ,
            },
            content:{
                template:`
                <div>213</div>`,
            },
        },
    },
    {
        path: '/post',
        components: {
            sidebar: {
                template:`
           <div>
                <h1>帖子管理</h1>
                <ul>
                <li>帖子列表</li>
                <li>分类管理</li>
                </ul>
            </div>` ,
            },
            content:{
                template:`
                <div>213132</div>`,
            },
        },
    },
];

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

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

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/user">用户管理</router-link>
        <router-link to="/post">帖子管理</router-link>
    </div>
    <div>
        <router-view name="sidebar"></router-view>
        <router-view name="content"></router-view>
    </div>
</div>

6.导航钩子

beforeEach() 在路由访问之前干些事情

afterEach() 嗯哼?

var routes = [
    {
        path: '/',
        component: {
            template:`
            <div>
                <h1>首页</h1>
            </div>`,
        },
    },
    {
        path: '/login',
        component: {
            template:`
           <div>
                <h1>登陆</h1>
            </div>`,
        },
    },
    {
        path: '/post',
        component: {
                template:`
           <div>
                <h1>帖子管理</h1>
                <ul>
                <li>帖子列表</li>
                <li>分类管理</li>
                </ul>
            </div>` ,
        },
    },
];

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

router.beforeEach(function (to, from, next) { //在路由访问之前
    var logged_in = false; //false 未登陆
    if(!logged_in && to.path == '/post')
        next('/login');
    else
        next();
});

router.afterEach(function (to, from) { //路由访问之后
    console.log("to:"+to);
    console.log("from:"+from);
});

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

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/post">帖子管理</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>

7.元数据及路由匹配

meta

var routes = [
    {
        path: '/',
        component: {
            template:`
            <div>
                <h1>首页</h1>
            </div>`,
        },
    },
    {
        path: '/a',
        meta: {
            login_required: true,
        },
        component: {
            template:`
            <div>
                <h1>a</h1>
            </div>`,
        },
    },
    {
        path: '/login',
        meta: {
            login_required: true,
        },
        component: {
            template:`
           <div>
                <h1>登陆</h1>
            </div>`,
        },
    },
    {
        path: '/post',

        component: {
            template:`
            <div>
                <h1>帖子管理</h1>
                <router-link to="rain" append>雨</router-link>
                <router-view></router-view>
            </div>` ,
        },
        children:[
            {
                path: 'rain',
                component: {
                    template: `<h2>雨天</h2>`,
                }
            }
        ]
    },
];

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

router.beforeEach(function (to, from, next) { //在路由访问之前
    var logged_in = true; //false 未登陆
    //console.log(to.matched);

    //if(!logged_in && to.path == '/post')
    // if(!logged_in && to.matched.some(function (item) {//只要有一个为 /path 就跳转到 登陆页面
    //     return item.path == '/post';
    // }))
    if(!logged_in && to.matched.some(function (item) {//只要有一个为 /path 就跳转到 登陆页面
        return item.meta.login_required;
    }))
        next('/login');
    else
        next();
});

router.afterEach(function (to, from) { //路由访问之后
    console.log("to:"+to);
    console.log("from:"+from);
});

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

<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/login">登录</router-link>
        <router-link to="/post">帖子管理</router-link>
        <router-link to="/a">a</router-link>
    </div>
    <div>
        <router-view></router-view>
    </div>
</div>
前端
△