• vue路由

    1.路由的概念

    路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。

    路由分为前端路由和后端路由

    1. 后端路由是由服务器端进行实现，并完成资源的分发，根据不同的URL返回不同的内容。
    2. 前端路由是依靠hash值(锚链接)的变化进行实现 ，根据不同的用户事件显示不同的页面，即用户事件和事件处理函数的对应关系。

    2.前端路由的初体验

    前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）
    核心实现依靠一个事件，即监听hash值变化的事件

    //监听window的onhanshchange事件， 根据获取的最新hash，切换要显示的组件名称
window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

    • 1
    • 2
    • 3
    • 4
    • 5

    前端路由实现tab栏切换：

        DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Documenttitle>
        
        <script src="./lib/vue_2.5.22.js">script>
    head>
    <body>
        
        <div id="app">
        
        <a href="#/zhuye">主页a> 
        <a href="#/keji">科技a> 
        <a href="#/caijing">财经a>
        <a href="#/yule">娱乐a>

        
        
        <component :is="comName">component>
        div>

        <script>
        // #region 定义需要被切换的 4 个组件
        // 主页组件
        const zhuye = {
            template: '
    主页信息
    '    
        }

        // 科技组件
        const keji = {
            template: '
    科技信息
    '    
        }

        // 财经组件
        const caijing = {
            template: '
    财经信息
    '    
        }

        // 娱乐组件
        const yule = {
            template: '
    娱乐信息
    '    
        }
        // #endregion

        // #region vue 实例对象
        const vm = new Vue({
            el: '#app',
            data: {
            comName: 'zhuye'
            },
            // 注册私有组件
            components: {
            zhuye,
            keji,
            caijing,
            yule
            }
        })
        // #endregion

        // 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
        window.onhashchange = function() {
            // 通过 location.hash 获取到最新的 hash 值
            console.log(location.hash);
            switch(location.hash.slice(1)){
            case '/zhuye':
                vm.comName = 'zhuye'
            break
            case '/keji':
                vm.comName = 'keji'
            break
            case '/caijing':
                vm.comName = 'caijing'
            break
            case '/yule':
                vm.comName = 'yule'
            break
            }
        }
            script>
    body>
    html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85

    点击每个超链接之后，会进行相应的内容切换，如下：

    在这里插入图片描述

    3.Vue Router简介

    它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
    Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。

    Vue Router的使用步骤
    1. 导入js文件。Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router。
    <script src="lib/vue_2.5.22.js">script>
<script src="lib/vue-router_3.0.2.js">script>

    • 1
    • 2
    1. 添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性，
      to属性的值会被渲染为#开头的hash地址
    <router-link to="/user">Userrouter-link>
<router-link to="/login">Loginrouter-link>

    • 1
    • 2
    1. 添加路由填充位（路由占位符），将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置
    2. 定义路由组件
    var User = { template:"<div>This is Userdiv>" }
var Login = { template:"<div>This is Logindiv>" }

    • 1
    • 2
    1. 配置路由规则并创建路由实例
    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    1. 将路由挂载到Vue实例中
    new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
    //在ES6中如果属性和属性名称相同可以简写，如自定义的路由名称也叫router，则上面可以直接简写为router
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    路由重定向：在访问A的时候，强制用户跳转到地址C。

    //在路由规则中添加一条路由规则即可，如下：
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址 / ,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4.嵌套路由

    当我们进行路由的时候显示的组件中还有新的子级路由链接以及内容。

    嵌套路由最关键的代码在于理解子级路由的概念：比如我们有一个/login的路由，那么/login下面还可以添加子级路由，如:/login/account、/login/phone

    	var User = { template: "
    This is User
    "     }
//Login组件中的模板代码里面包含了子级路由链接以及子级路由的占位符
 	var Login = { template: `
    
        
    This is Login
    
        
    
        
        账号密码登录
        扫码登录
        
        
        
    `     }

    //定义两个子级路由组件
    var account = { template:"
    账号：
    密码：
    "    };
    var phone = { template:"
    扫我二维码
    "    };

    var myRouter = new VueRouter({
        //routes是路由规则数组
        routes: [
            //父路由规则
            { path:"/",redirect:"/user"},
            { path: "/user", component: User },
            
            { 
                path: "/login", 
                component: Login,
                //通过children属性为/login添加子路由规则
                children:[
                    { path: "/login/account", component: account },
                    { path: "/login/phone", component: phone },
                ]
            }
        ]
    })

    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router:myRouter
    });

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41

    页面效果大致如下：

    在这里插入图片描述

    5.动态路由匹配

    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过   :参数名  的形式传递参数 
        { path: "/user/:id", component: User }
        ]
}
//组件中通过$route.params获取路由参数
var User = { template:"
    用户：{{$route.params.id}}
    "    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    使用$route.params.id来获取路径传参的数据不够灵活，可以通过props来接收参数。

    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true }
        ]
}
   
var User = { 
    props:["id"],
    template:"
    用户：{{id}}
    "    
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    也可以将props设置为对象，那么就直接将对象的数据传递给组件进行使用。

    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为对象，则传递的是对象中的数据给组件
        { path: "/user/:id", component: User,props:{username:"jack",pwd:123} }
        ]
}
                             
var User = { 
    props:["username","pwd"],
    template:"
    用户：{{username}}---{{pwd}}
    "    
 }                           

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    3.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。

    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为函数，则通过函数的第一个参数获取路由对象
        //并可以通过路由对象的params属性获取传递的参数
        //
        { path: "/user/:id", component: User,props:(route)=>{
            return {username:"jack",pwd:123,id:route.params.id}
            } 
        }
        ]
}

var User = { 
    props:["username","pwd","id"],
    template:"
    用户：{{id}} -> {{username}}---{{pwd}}
    "    
 }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    6.命名路由

    给路由取别名

    var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过name属性为路由添加一个别名
        { path: "/user/:id", component: User, name:"user"}
        ]
}
                             
//添加了别名之后，可以使用别名进行跳转
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>

//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13

    7.编程式导航

    页面导航的两种方式：
    A.声明式导航：通过点击链接的方式实现的导航
    B.编程式导航：调用js的api方法实现导航

    //Vue-Router中常见的导航方式：
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go,可以实现前进和后退
this.$router.go( -1 );

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    const User = {
  template: `
    
    
    User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}
    
    
  
    `    ,
  methods: {
    goRegister() {
      this.$router.push('/register')
    }
  },
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    webrtc优势与模块拆分
    李廉洋：4.24-4.25现货黄金，WTI原油区间震荡，走势分析。
    新零售项目及离线数仓核心面试，，220807，，
    ArcGIS中添加在线地图（影像图、街道图等）
    Apache POI
    便利店小程序可以做哪些营销活动呢
    设计模式-命令模式
    tracepoint: 定义函数及调用示例
    《安富莱嵌入式周报》第283期：全开源逆向“爆破”硬件工具，Linux内核6.1将正式引入RUST语言，I3C培训教程，80款市场成熟的电感式位置传感器设计
    常见算法-巴斯卡三角形（Pascal）
  • 原文地址：https://blog.csdn.net/weixin_44064908/article/details/126803066