zoukankan      html  css  js  c++  java
  • Vue Router学习笔记

    前端的路由:一个地址对应一个组件
    Vue Router中文文档

    一、路由基本使用

    第1步:导入Vue Router:
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    第2步:声明(路由)组件
    1546569097232

    第3步:创建路由对象
    1546569164300
    重定向:使用redirect

    第4步:注册路有/挂载路由
    1546569142309

    二、命名路由

    命名路由的原因:防止在代码中硬编码URL

    1546570384118

    1546570527006

    this.$router对应的是当前app的路由对象

    this.$route对应的是当前的路由信息

    路由切换的监听需要用到watch 侦听器

     // 怎么查看每一次路由切换之后的当前路由信息呢?
            watch: {
                '$route': function (to, from) {
                    console.log(to);  // 要切换到的路由信息
                    console.log(from);  // 切换前的路由信息
                    // ajax 请求数据
                    // this.data.courseList
                }
            }
    

    三、路由的动态匹配

    URL有参数

    /user/1

    /user/2

    /user?id=1

    记住两个参数

    1. `this.$route.params`获取URL中的参数
    2. `this.$route.query`获取URL中的查询参数
    

    1546573469528

    四、嵌套的路由(二级路由)

    类似于Django的二级路由

    /user/1/posts

    /user/1/info

    组件的嵌套

    let User = {
            template: `
                <div>
                <h1>这是 {{ this.$route.params.id }}的个人中心页面!</h1>
                <p>当前路由的query信息 {{ this.$route.query.key}}</p>
                <hr>
                <router-view></router-view>
    </div>
            `,
        };
    

    二级路由设置

    let router = new VueRouter({
            // mode: 'history',
            routes: [
                {
                    path: '/user/:id',
                    name: 'user',
                    component: User,
                    children: [
                        {path: '', component: UserInfo},
                        {path: 'info', component: UserInfo},
                        {path: 'posts', component: UserPosts},
                    ]
                },
            ]
        });
    

    五、编程式导航和声明式导航

    声明式导航是我们一直在用的,即<router-link></router-link>

    编程式导航用代码控制页面的跳转

    // 定义课程页面组件
        let Course = {
            template: `<div>
                <h1>这是免费课程页面!</h1>
                <button v-on:click="toHome">返回主页</button>
            </div>`,
            methods: {
                toHome(){
                    // 编程式导航 (用代码控制页面跳转)
                    this.$router.push({name: 'home'})
                }
            }
        };
    

    六、重点

    使用Vue Router之后,要记住多出来两个重要的对象:

    this.$router对应的是当前app的路由对象

    this.$route对应的是当前的路由信息

  • 相关阅读:
    [程序员必备工具]分享一款不错的个人代码个人知识管理软件wiz
    移动开发,如何选择手机软件开发​平台?
    Best Wishes,my Married Friend!
    三年来最开心的一天!
    “世事无绝对”也是相对的……
    又到世界CUP……
    利物浦,总是在我情绪低落时给我鼓舞!
    一种感觉
    How to break to loop? It frustrates me!
    取舍有度,学会放弃……
  • 原文地址:https://www.cnblogs.com/russellyoung/p/Vue-Router.html
Copyright © 2011-2022 走看看