• Vue路由学习


                                   Vue路由学习

    目标
    1. 路由概念学习
    2. Vue-router基本使用
    3. Vue-router嵌套路由
    4. Vue-router动态路由
    5. Vue-router路由命名
    6. Vue-router编程是导航用法
    7. 基于路由的方式实现业务功能

    一、路由概念

    1.1、前端路由:

    概念:根据不同的用户事件,显示不同的页面内容
    本质:用户事件与事件处理函数之间的对应关系
    作用:提高用户对网站的体验

    1.2、Vue Router

    Vue官方提供的路由管理器,路由和Vue.js的核心深度集成,可以非常方便的用于SPA项目开发。
    说白了就是根据不同的路径显示不同的页面SPA单页面应用程序:整个页面SPA(Single PageApplication)
    单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作。
    SPA实现原理之一:基于URL地址的hash (hash的变化会导致浏览器记录访问历史的变化、但是haln的变化不会触发新的URL请求)。
    在实现SPA过程中,最核心的技术点就是前端路由。
    Vue Router包含的功能有:
    1、支持HTML5历史模式或者hash模式(实现路由的常用方式)
    2、支持嵌套路由
    3、支持路由参数
    4、支持编程式路由
    5、支持命名路由

    二、Vue-router基本使用

    0、基本使用步骤
    1、引入相关的库文件
    2、添加路由链接
    3、添加路由填充位
    4、定义路由组件
    5、配置路由规则并创建路由实例
    6、把路由挂载到Vue根实例中
    以下是非脚手架结构学习

    1、引入相关库文件

    <!-- 导入Vue文件,用于为全局对象Window挂载 Vue构造函 数 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue .js"> 
    </script> 
    <!-- 导入vue-router文件, 用于为全局对象Window挂载 vue-router构造函数 -->
    <script src="https://unpkg.com/vue- router/dist/vue-router.js">
    </script>
    

      

    2、添加路由链接

    <!--router-link是Vue中提供的标签,默认会被渲染为 a标 签 -->
    <!-- to 属性默认会被渲染成 href属性 -->
    <!-- to 属性的值 默认会被渲染成 #开头的hash地址 -->
    <router-link to="/tom">Tom</router-link> 
    <router-link to="/jerry">Jerry</router-link>
    

      

    3、添加路由填充位

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

    4、定义路由组件

    定义路由跳转展示的内容组件
    let Tom = {
     template : `<h1>Tom组件</h1>` 
    };
    let Jerry = { 
    template : `<h1>Jerry组件</h1>` 
    };

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

    //用于配置路由规则的实例 
    const router = new VueRouter({
     //存储所有的路由规则的数组 
    routes: [ 
    //path表示当前路由规则匹配的hash地址 
    //component表示当前路由规则对应要展示的组件 
    //注意component只接收组件对象 
    {path : '/tom', component : Tom}, 
    {path : '/jerry', component : Jerry} 
    ] });
    

      

    6、把路由挂载到Vue根实例中为了能够让路由规则生效,必须把路由对象挂载到vue实例对象上

    let app = new Vue({

    el : "#app",

    data : {},

    methods: {},

    //挂载实例对象

    router : router

    });

      

    7、测试效果

    8、路由重定向

    路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址B,从而展示特定的组件页面;
    Vue实现思路:通过路由规则中的redirect属性 ,指定一个新的路由地址,可以很方便地设置路由的重定向
    其中,path表示需要被重定向的原地址,redirect表示将要 被重定向到的新地址 
    routes: [ 
    {path : '/',redirect : '/tom'}, 
    {path : '/tom', component : Tom}, 
    {path : '/jerry', component : Jerry} 
    ]
    

    三、嵌套路由

    嵌套路由指的是通过路由规则的层级嵌套,可以在页面上展示出复杂的组件结构关系

    2.1、嵌套路由用法

    1、需求引入

    • 点击父级路由链接显示模板内容
    • 模板内容中又有子级路由链接
    • 点击子级路由链接显示子级模板内容

    2、实现思路

    • 在父路由中添加子路由链接和路由占位符
    • 配置路由规则,在父路由规则中,通过children属性,添加子路由规则
    //在父路由中添加子路由链接和路由占位符
     let Jerry = {
     template : `<div> <h1>Jerry组件</h1> 
     <hr/> 
    <!-- 子路由链接-->
    <router-link to="/jerry/j1">j1</router-link> 
    <router-link to="/jerry/j2">j2</router-link> 
    <!-- 子路由占位符-->
    <router-view /> </div>` };
    

      

    //省略创建子路由组件 
    { 
    //children数组表示子路由规则
     path : '/jerry', component : Jerry, 
     children : [
     {path : '/jerry/j1',component : j1}, 
     {path : '/jerry/j2',component : j2}
     ] }
    

    三、动态路由匹配

    3.1、动态路由基本使用

    思考:有以下3个路由链接
    <router-link to="/tom/1">Tom1</router-link> 
    <router-link to="/tom/2">Tom2</router-link> 
    <router-link to="/tom/3">Tom3</router-link> 
    <router-link to="/tom/4">Tom4</router-link>
    定义如下路由规则,是否可行?如果有更多又该如何?
    {path : '/tom/1',component : Tom}
    {path : '/tom/2',component : Tom} 
    {path : '/tom/3',component : Tom} 
    {path : '/tom/4',component : Tom}

    什么是动态路由参数:

    如果某些路由规则中,一部分是完全一样的,一部分是动态变化的,那么就可以将这部分动态变化的部分形成动态路由参数。
     

    实现方式:通过动态路由参数的模式进行路由匹配

    如果进行动态参数匹配语法实例: 
    routes: [ {path : '/tom/:id', component : Tom},
     ] 

    路由组件通过$route.params 获取路由参数

    路由中如何使用动态参数语法实例:
     template: `
    <div>{{$route.params.id}}</div>` 
    分析共性,抽出公用路由,设置参数,获取使用

    3.2、路由组件传递参数---props

    $route与对应路由形成高度耦合,不够灵活,所以可以使用props将组件和路由解耦。

    1、用法1:props设置布尔类型

    将props 设置为true , 开启props传参
    routes: [
     {path : '/tom/:id', component : Tom,props : true},
     ]
    //路由组件 
    props : ['id'], 
    //使用路由参数
     template : `<h1>Tom组件{{id}}</h1>`

    2、props的值为对象类型

    将props 设置为对象,它会被按原样设置为组件属性。只会传递对象数据
    {path : '/tom/:id', component : Tom,
    props : {name : 'zs'}}
    props : ['name'],
     template : `<h1>Tom组件{{$route.params.id}} {{name}}</h1>` 

    3、props的值为函数

    将props 设置为函数,将静态值与基于路由的值结合动态传参可以使用 route.params获取
    {path : '/tom/:id', component : Tom, 
    props:route => ({name : '张三',id : route.params.id})},
    props : ['name','id'], 
    template : `<h1>Tom组件{{id}} {{name}}</h1>`
    

    四、命名路由

    有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。
    语法:使用name关键字 进行命名
    routes: [
     { path: '/user/:userId', name: 'user', component: User }
     ] 
    })
    在路由链接中使用 :to属性设置链接的地址,并且可以使用
    params携带参数
    <router-link 
       :to="{ name: 'user',params: { userId: 123
     }}">User 
    </router-link>

    五、编程式导航

    5.1、页面导航的两种方式

    1.声明式导航:通过点击链接实现导航的方式,叫做声明式导航

        例如:普通网页中的a链接或vue中的

    2.编程式导航:通过调用JavaScript形式的API实现导航的方式,叫做编程式导航

         例如:普通网页中的location.href

    5.2、Vue实现编程式导航

    常见编程式导航Api如下:
    • this.$router.push('hash地址')
    • this.$router.go(n)
    // 字符串
    $router.push('home')
    // 对象
    router.push({ path: 'home' })
    // 命名的路由
    router.push({ name: 'user', params: { userId:
    '123' }})
    // 带查询参数,变成 /register?plan=private
    router.push({ path: 'register', query: { plan:
    'private' }})
    

      

  • 相关阅读:
    KNN算法
    mysql必须知道的
    励志的演讲
    30条程序员名言警句
    别人的文章:为什么软件开发,人多,事少,还会工作量大?
    分享一个比较受启发的文章“学历代表过去,能力代表现在,学习力代表未来”
    mvc 学前必知
    启动docker容器 防火墙问题报错 ! -i docker0' failed: iptables: No chain/target/match by that name.
    git指令详解总结
    git reset 版本回退的三种用法总结
  • 原文地址:https://www.cnblogs.com/lxn521/p/13994400.html
Copyright © 2020-2023  润新知