Vue路由

时间：2018-09-11 22:56:50 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：time src component hid 函数路由 sed 使用 nts

一，vue-router

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

二，路由的注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/">首页</router-link>  <!--用于展示页面中那个点击跳转的标签-->
    <router-link to="/course">课程</router-link>
    <div>
        <router-view></router-view>  <!--用于展示每个路由中的模板-->
    </div>
</div>

<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let all_routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },

        {
            path: "/course",
            component: {
                template: `<div><h1>{{msg}}</h1></div>`,
                data(){
                    return {
                        msg: "这是课程页面"
                    }
                }
            }
        }

    ];
    let vue_router = new VueRouter({
        routes:all_routes

    });

   const app = new Vue({
       el: "#app",
       router: vue_router

   })
</script>
</body>
</html>

三，路由的参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/user/ggg?age=18">ggg的页面</router-link>
    <router-link to="/user/hhh/?age=19">hhh的页面</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>
<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>这是首页</h1></div>`
            }
        },
        {
            path: "/user/:name",
            component: {
                template: `<div>
                                <h1>这是用户{{this.$route.params.name}},年龄是{{this.$route.query.age}}</h1>
                                <h2>试试： {{name}}</h2>
                           </div>`,
                data(){
                    return {
                        name: this.$route.params.name  // 直接用这个name数据 有坑，永远是页面第一次刷新时那个值
                    }
                },
                mounted(){
                    console.log(this.$route);  // 包含了该路由的所有信息
                    console.log(this.$router)
                }
            }
        }
    ];
    let vue_router = new VueRouter({  //注册到vueRouter对象中
        routes: routes
    });
    const app = new Vue({
        el: "#app",
        router: vue_router  // 注册到Vue中
    })
</script>
</body>
</html>

View Code

四，路由的命名

注意： router-link里to一定要v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/">首页</router-link>
    <!--<router-link to="/course/ggg/?age=18">ggg页面</router-link>-->
    <router-link :to="{name:‘courses‘, params:{name:‘ggg‘}, query: {age:18}}">ggg页面</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>

<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>首页</h1></div>`
            }
        },
        {
            path: "/course/:name",
            name: "courses",
            component: {
                template: `<div>
                                <h1>这是用户{{this.$route.params.name}},年龄是{{this.$route.query.age}}</h1>
                           </div>`,
            }
        }
    ];
    vue_router = new VueRouter({
        routes: routes
    });
    const app = new Vue({
        el: "#app",
        router: vue_router

    })
</script>
</body>
</html>

View Code

五，子路由的注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/">主页</router-link>
    <router-link to="/course">课程</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>

<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let routes = [
        {
            path: "/",
            component: {
                template: `<div><h1>主页</h1></div>`
            }
        },
        {
            path: "/course",
            redirect: "/course/more1",  // 页面上默认显示跳转的这个子路由
            component: {
                template: `<div>
                                <h1>课程页面</h1>
                                <router-link to="/course/more1">详情1</router-link>
                                <router-link to="/course/more4">详情4</router-link>
                                <router-link to="/more2">错误写法--->详情2</router-link>
                                <router-link to="more3">错误写法---> 详情3</router-link>
                                <router-view></router-view>
                           </div>`
            },
            children: [  // 在这里注册子路由
                {
                    path: "/course/more1",  // 一般写这种，不会出错
                    component: {
                        template: `<div><h3>课程详情页面1</h3></div>`
                    }
                },
                {
                    path: "/course/more4",  // 一般写这种，不会出错
                    component: {
                        template: `<div><h3>课程详情页面4</h3></div>`
                    }
                },
                // {
                //     path: "/more2",  // 错误的写法
                //     component: {
                //         template: `<div><h3>课程详情页面2</h3></div>`
                //     }
                // },
                // {
                //     path: "more3", // 这个需要 写append，但是append2次都会连续追加，有错
                //     component: {
                //         template: `<div><h3>课程详情页面3</h3></div>`
                //     }
                // },
            ]
        }
    ];
    let vue_router = new VueRouter({
        routes: routes
    });
    const app = new Vue({
        el:"#app",
        router: vue_router
    })
</script>
</body>
</html>

View Code

六，手动访问路由，以及传参

// 基于上面例子追加
// 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)
        }
    }
});

手动路由~以及传参

View Code

七，命名路由视图 router-view

就是在components中注册多个组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <router-link to="/">首页</router-link>
    <router-link to="/course">课程</router-link>
    <div>
        <router-view></router-view>
        <router-view name="my_header"></router-view>
        <router-view name="my_header"></router-view>
    </div>
</div>

<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let all_routes = [
        {
            path: "/",
            component: {
                template: `<div>
                                <h1>这是首页</h1>
                           </div>`
            }
        },

        {
            path: "/course",
            components: {
                my_header: {
                    template: `<div>
                                    <h1>这是课程头部</h1>
                               </div>`
                },
                my_footer: {
                    template: `<div><h1>这是课程尾部</h1></div>`
                }
            }
        },
    ];
    let vue_router = new VueRouter({
        routes: all_routes
    });
    const app = new Vue({
        el: "#app",
        router: vue_router
    })
</script>
</body>
</html>

View Code

$route以及$router的区别~~

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

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

八，路由的钩子以及meta的配置

路由的生命周期就是从一个路由跳转到另一路由整个过程，在这个过程中暴露两个钩子router.beforeEach() router.afterEach()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/">主页</router-link>
    <router-link to="/course">课程</router-link>
    <router-link to="/login">登陆</router-link>
    <div>
        <router-view></router-view>
    </div>
</div>
<script src="vue.js"></script>
<script src="vue_router_js.js"></script>
<script>
    let routes = [
        {
            path: "/",
            meta: {"xxx": "ooo"},
            component: {
                template: `<div><h1>这是主页</h1></div>`
            }
        },
        {
            path: "/course",
            // redirect: "/course/more",
            meta: {required_login: true},
            component: {
                template: `<div>
                                <h1>课程页面</h1>
                                <router-link :to="{name: ‘more‘}">详情</router-link>
                                <router-view></router-view>
                            </div>`
            },
            children: [
                {
                    path:"/course/more",
                    meta: {required_login: true},
                    name:"more",
                    component: {
                        template: `<div><h1>课程详情页面</h1></div>`
                    }
                }
            ]
        },
        {
            path: "/login",
            component: {
                template: `<div><h1>登陆页面</h1></div>`
            }
        },
    ];
    let vue_router = new VueRouter({
        routes: routes
    });
    vue_router.beforeEach(function (to, from, next) {
        console.log(to);
        console.log(from);
        console.log(next);
        // if(to.fullPath === "/course/more"){
        //     next("/login")
        // }else{
        //     next()
        // }
        if(to.meta.required_login){  // 做登陆限制
            next("/login")
        }else{
            next()
        }
    });
    vue_router.afterEach(function (to, from) {
        console.log(to); // 和beforeEach中的to一样
        console.log(from)
    });
    const app = new Vue({
        el: "#app",
        router: vue_router,
        data: {
            test1: "",
        }
    })
</script>
</body>
</html>

View Code

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

next 参数详解

Vue路由

标签：time src component hid 函数路由 sed 使用 nts

原文地址：https://www.cnblogs.com/glh-ty/p/9630853.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行