zoukankan      html  css  js  c++  java
  • Vue基础——Vue前端路由

    目标:
      能够说出路由的概念
      能够说出Vue-router的基本使用步骤
      能够说出Vue-router的嵌套路由用法
      能够说出Vue-router动态路由匹配用法
      能够说出Vue-router命名路由用法
      能够说出Vue-router编程式导航用法
      能够基于路由的方式实现业务功能
    目录:
      路由的基本概念与原理
      vue-router的基本使用
      vue-router嵌套路由
      vue-router动态路由匹配
      vue-router命名路由
      vue-router编程式导航
      基于vue-router的案例
    1、路由的基本概念与原理
    1.1、路由
    路由是一个比较广义和抽象的概念,路由的本质就是对应关系
    在开发中,路由分为:
      后端路由
      前端路由
      后端路由
        概念:根据不同的用户URL请求,返回不同的内容
        本质:URL请求地址与服务器资源之间的对应关系
      SPA(Single Page Application)
        后端渲染(存在性能问题)
        Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)
        SPA单页面应用程序:整个网站之后一个页面,内容的变化通过Ajax局部更新实现,同时支持浏览器地址的前进后退操作
        SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化,但是hash的变化不会触发新的URL请求)
        在实现SPA过程中,最核心的技术就是前端路由
      前端路由
        概念:根据不同的用户事件,显示不同的页面内容
        本质:用户事件与事件处理函数之间的对应关系
        前端路由负责事件监听,触发事件后,通过事件函数渲染不同的内容。
      实现简易前端路由
        基于URL中的hash实现(点击菜单的时候改变URL的hash,根据hash的变化控制组件的切换)
        //监听windows的onhashchange事件,根据获取到的最新的hash值,切换要显示的组件的名称

    windows.onhashchange = function(){
        //通过location.hash获取到最新的hash值
    }

    1.2、Vue Router
    Vue Router是Vue.js官方的路由管理器,它和Vue.js的核心深度集成,可以非常方便的用于SPA应用程序的开发。
    Vue Router包含的功能有:
      支持HTML5历史模式或hash模式
      支持嵌套路由
      支持路由参数
      支持编程式路由
      支持命名路由
    2、vue-router的基本使用
    2.1、基本使用步骤
    引入相关的库文件

    //导入vue文件,为全局window对象挂载Vue构造函数
    <script src="./lib/vue_2.5.22.js"></script>
    //导入vue-router文件,为全局window对象挂载VueRouter构造函数
    <script src="./lib/vue-router_3.0.2.js"></script>

    添加路由链接

    //router-link是vue中提供的标签,默认会被渲染为a标签
    //to属性默认会被渲染为href属性
    //to属性的值默认会被渲染为#开头的hash地址
    <router-link to="/user">User</router-link>
    <router-link to="/register">Register</router-link>

    添加路由填充位

    //路由填充位(也叫做路由占位符)
    //将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置
    <router-view></router-view>

    定义路由组件

    var User = {
        template:'<div>User</div>'
    }
    var Register = {
        template:'<div>Register</div>'
    }

    配置路由规则并创建路由实例

    //创建路由实例对象
    var router = new VueRouter({
        //routes是路由规则数组
        routes:[
            //每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
            //path表示当前路由规则匹配的hash地址
            //component表示当前路由规则对应要展示的组件
            {path:'/user',component:User},
            {path:'/register',component:Register}
        ]
    })

    把路由挂载到Vue根实例中

    new Vue({
        el:'#app',
        //为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上
        router
    })

    2.2、路由重定向
    路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址C,从而展示特定的组件页面;
    通过路由规则的redirect属性,指定一个新的路由地址,可以很方便的设置路由的重定向:

    var router = new VueRouter({
        routes:[
        //其中,path表示需要被重定向的原地址,redirect表示将要被重定向到的新地址
        {path:'/',redirect:'/user'},
        {path:'/user',component:User},
        {path:'/register',component:Register}
        ]
    })

    3、vue-router嵌套路由
    3.1、嵌套路由用法
    嵌套路由功能分析
      点击父级路由链接显示模板内容
      模板内容中又有子级路由链接
      点击子级路由链接显示子级模板内容
    父路由组件模板
      父级路由链接
      父组件路由填充位

    <p>
        <router-link to="/user">User</router-link>
        <router-link to="/register">Register</router-link>
    </p>
    <div>
        //控制组件显示位置
        <router-view></router-view>
    </div>

    自己路由模板
      子级路由链接
      子级路由填充位

    const Register = {
        template:`<div>
            <h1>Register组件</h1>
            <hr/>
            <router-link to="/register/tab1">Tab1</router-link>
            <router-link to="/register/tab1">Tab1</router-link>
            //子路由填充位置
            <router-view/>
        </div>`
    }

    嵌套路由配置
      父级路由通过children属性配置子路由

    var router = new VueRouter({
        routes:[
            {path:'/user',component:User},
            {
                path:'/register',
                component:Register,
                //通过children属性,为/register添加路由规则
                children:[
                    {path:'/register/tab1',component:Tab1},
                    {path:'/register/tab2',component:Tab2}
                ]
            }
        ]
    })

     4、vue-router动态路由匹配

    4.1、动态匹配路由的基本用法
    思考:

    //有如下3个路由链接
    <router-link to="/user/1">User1</router-link>
    <router-link to="/user/2">User2</router-link>
    <router-link to="/user/3">User3</router-link>
    //定义如下三个对应的路由规则,是否可行???
    {path:'/user/1',component:User}
    {path:'/user/2',component:User}
    {path:'/user/3',component:User}
    //上述做法存在的问题是:如果有N个路由链接则需要写N个相似的路由规则,动态路由可以解决这个问题

    动态路由的应用场景:通过动态路由参数的模式进行路由匹配

    var router = new VueRouter{(
        routes:[
        //动态路径参数以冒号开头
            {path:'/user/id',component:User}
        ]
    )}
    const User = {
        //路由组件中通过$route.params获取路由参数
        template:'<div>User{{$route.params.id}}</div>'
    }

    4.2、路由组件传递参数
    $route与对应路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦
    props的值为布尔类型:

    const router = new VueRouter({
        routes:[
            //如果props被设置为true,route.params将会被设置为组件属性
            {path:'/user/:id',component:User,props:true}
        ]
    })    
    const User = {
        props:['id'],//使用props接收路由参数
        template:'<div>用户ID:{{ id }}</div>'//使用路由参数
    }

    props的值为对象类型:

    const router = new VueRouter({
        routes:[
            //如果props是一个对象,他会被按原样设置为组件属性
            {path:'/user/:id',component:User,props:{uname:'lisi',age:12}}
        ]
    })
    const User = {
        props:['uname','age'],
        template:'<div>用户信息:{{ uanme + '---' + age }}</div>'//使用路由参数
    }

    props的值为函数类型:

    const router = new VueRouter({
        routes:[
            //如果props是一个函数,则这个函数接收route对象为自己的形参
            {path:'/user/:id',
              component:User,
              props:route => {uname:'lisi',age:12,id:route.params.id}}
        ]
    })
    const User = {
        props:['uname','age',id],
        template:'<div>用户信息:{{ uanme + '---' + age + '---' + id }}</div>'//使用路由参数
    }

    5、vue-router命名路由
    命名路由的配置规则
    为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为"命名路由"。

    const router = new VueRouter({
        route:[
            {
                path:'/user:id',
                name:'user',
                component:User
            }
        ]
    })

    命名路由的使用

    <router-link :to="{name:'user',params:{id:123}}">User</router-link>
    router.push({name:'user',params:{id:123}})

    6、vue-router编程式导航
    6.1、页面导航的两种方式
    声明式导航:通过点击链接实现导航的方式,叫做声明式导航
    例如:普通网页中的<a></a>链接或vue中的<router-link></router-link>
    编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航
    例如:普通网页中的location.href
    6.2、编程式导航基本用法
    常用的编程式导航API如下:

    this.$router.push('hash地址')
    this.$router.go(n)
    const User = {
        template:'<div><button @click="goRgister">跳转到注册页面</button></div>',
        methods:{
            goRegister:function(){
                //用编程的方式控制路由跳转
                this.$router.push('/register');
            }
        }
    }

    6.3、编程式导航参数规则
    router.push()方法的参数规则

    //字符串(路径名称)
    router.push('/home')
    //对象
    router.push({path:'/home'})
    //命名的路由(传递参数)
    router.push({name:'/user',params:{userId:123}})
    //带查询参数,变成/register?uname=lisi
    router.push({path:'/register',query:{uname:'lisi'}})
  • 相关阅读:
    题解 CF171G 【Mysterious numbers
    题解 P1157 【组合的输出】
    题解 P3955 【图书管理员】
    题解 P2036 【Perket】
    题解 CF837A 【Text Volume】
    题解 CF791A 【Bear and Big Brother】
    题解 CF747A 【Display Size】
    题解 P1332 【血色先锋队】
    题解 P2660 【zzc 种田】
    题解 P4470 【[BJWC2018]售票】
  • 原文地址:https://www.cnblogs.com/michealyang/p/13739192.html
Copyright © 2011-2022 走看看