前端    

Vue-router(路由)

252 次访问
柯尔特
Scroll Down

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>
请博主喝咖啡

本文由 柯尔特 创作，如果您觉得本文不错，请随意赞赏
采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
原文链接：https://www.iscolt.com /archives/vue-router路由
最后更新于：2020-03-02 14:56:01

最新文章
记录一次线上团队合作经历

Lambda 表达式

Java8 新特性 Lambda 表达式简介。
Js 的 this （上下文）

设计模式和设计原则的关系[笔记]

设计原则是思想, 设计模式是实现上的手段, 设计模式就是设计原则的具体实现.
Go语言圣经-阅读笔记(0)-包

Go标准库包集合, 及理解
分类
记录 记录
说明 说明
原创 原创
芝士 芝士
笔记 study
未分类 default
标签
团队协作 团队协作
function function
functionalInterface functionalinterface
lambda lambda
interface interface
this this
js js
javascript javascript
研磨设计模式 研磨设计模式
设计模式 设计模式
Go go
golang golang
包 包
Packages packages
state state
props props
react react
记录 记录
kbone kbone
vue vue
说明 说明
Lombox lombox
GitHub github
npm npm
Spring spring
maven maven
前端 前端
nacos nacos
java java
环境 环境
mysql mysql
tomcat tomcat
nginx nginx
hikaricp hikaricp
zuul zuul
spring cloud config spring cloud config
git git
ssh ssh
小知识 小知识
linux linux
ubuntu ubuntu
security security
shiro shiro
oauth2 oauth2
spring cloud spring cloud
eureka eureka
ribbon ribbon
feign feign
hystrix hystrix
mybatis mybatis
整合 整合
druid druid
jpa jpa
tk.mybatis tk.mybatis
pagehelper pagehelper
mybatis-generator mybatis-generator
redis redis
docker docker
docker-compose docker-compose
跨域 跨域
CORS CORS
拦截器 拦截器
SpringMVC SpringMVC
interceptor interceptor
AOP AOP
面向切面编程 面向切面编程
elasticsearch elasticsearch
学习笔记 学习笔记
spring boot spring boot
模板引擎 模板引擎
文件上传 文件上传
示例 示例
支付宝 微信