zoukankan html css js c++ java

vue-route 路由

SPA 介绍：

+ 后段渲染（存在渲染性能问题）

+ Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）

+ SPA（Single Page Application ) 单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进后退操作。

+ SPA的实现原理之一：基于URL地址的hash （hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）

+ 在实现SPA过程中，最核心的技术点就是前端路由。

前端路由：

概念：根据不同的用户事件，显示不同的页面内容。

本质：用户事件与事件处理函数之间的对应关系。

用户触发事件，前端路由负责事件监听，触发事件后，通过事件函数渲染相应内容。

简易模拟实现前端路由功能:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10   <style>
11     .menu a {
12       display: inline-block;
13       margin-right: 10px;
14       line-height: 30px;
15       padding:0 20px;
16       background-color: lightblue;
17       text-decoration: none;
18     }
19   </style>
20 </head>
21 
22 <body>
23   <div id='app'>
24     <div class="menu">
25       <a :href="item.key" v-for='(item, index) in menu' :key='index'>{{item.title}}</a>
26     </div>
27     <component :is='comName'></component>
28   </div>
29 </body>
30 <script>
31   var vm = new Vue({
32     el: '#app',
33     data: {
34       comName: 'home',
35       menu: [
36         {
37           title: '首页',
38           key: '#/home'
39         },
40         {
41           title: '新闻',
42           key: '#/news'
43         },
44         {
45           title: '关于',
46           key: '#/about'
47         }
48       ]
49     },
50     components: {
51       'home':{
52         template:'<h1>首页home</h1>'
53       },
54       'news':{
55         template:'<h1>新闻news</h1>'
56       },
57       'about':{
58         template:'<h1>关于about</h1>'
59       },
60     }
61   })
62 
63   window.onhashchange = () => {
64     vm.comName = location.hash.slice(2)
65     console.log(vm.comName)
66   }
67 </script>
68 
69 </html>

vue-router：

Vue Router (官网： http://router.vuejs.org/zh/) 是Vue.js 官方的路由管理器。它和Vue.js 的核心深度集成，可以非常方便的用于SPA应用程序的开发。

Vue Router 包含的功能有：

1. 支持HTML5历史模式或hash模式

2.支持嵌套路由

3.支持路由参数

4.支持编程式路由

5.支持命名路由

6.路由守卫

7.过渡动画

8.懒加载

....

基本使用步骤：

1.引入相关库文件

2.添加路由链接

<router-link to='/home'>home</router-link>

<router-link to='/news'>news</router-link>

<router-link to='/about'>about</router-link>

</div>

3.添加路由填充位

<router-view></router-view>

</div>

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

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10   <script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
11 </head>
12 
13 <body>
14   <div id='app'>
15     <!-- 路由链接 -->
16     <router-link to='/home'>home</router-link>
17     <router-link to='/news'>news</router-link>
18     <router-link to='/about'>about</router-link>
19 
20     <!-- 路由填充位 -->
21     <router-view></router-view>
22   </div>
23 </body>
24 <script>
25 
26   const home = {
27     template: '<h1>首页home</h1>'
28   }
29 
30   const news = {
31     template: '<h1>新闻news</h1>'
32   }
33 
34   const about = {
35     template: '<h1>关于about</h1>'
36   }
37 
38   const router = new VueRouter({
39     // routes 是路由规则数组
40     //  每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
41     // path 表示当前路由规则匹配的hash地址
42     // component 表示当前路由规划对应要展示的组件
43     routes: [
44       {
45         path: '/home',
46         component: home
47       },
48       {
49         path: '/news',
50         component: news
51       },
52       {
53         path: '/about',
54         component: about
55       }
56     ]
57   })
58 
59   var vm = new Vue({
60     el: '#app',
61     data: {
62 
63     },
64     components: {
65       'home': home,
66       'news': news,
67       'about': about,
68     },
69     // 挂载路由
70     router
71   })
72 </script>
73 
74 </html>

嵌套路由的用法：

嵌套路由功能分析：

1.点击父级路由链接显示模版内容

2.模版内容中有忧子级路由链接

3.点击子级路由链接显示子级模版内容

嵌套路由的配置：

代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
10   <script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
11 </head>
12 
13 <body>
14   <div id='app'>
15     <!-- 路由链接 -->
16     <router-link to='/home'>home</router-link>
17     <router-link to='/register'>register</router-link>
18 
19     <!-- 路由填充位 -->
20     <router-view></router-view>
21   </div>
22 </body>
23 <script>
24 
25   const home = {
26     template: '<h1>首页home</h1>'
27   }
28 
29   const register = {
30     template: `
31    <div>
32     <h1>register</h1>
33     <router-link to='/register/tab1'>tab1</router-link>
34     <router-link to='/register/tab2'>tab2</router-link>
35     <router-view> </router-view>
36    </div>
37     `
38   }
39 
40   const tab1 = {
41     template: '<h1>tab1子组件</h1>'
42   }
43 
44   const tab2 = {
45     template: '<h1>tab2子组件</h1>'
46   }
47 
48   const router = new VueRouter({
49     // routes 是路由规则数组
50     //  每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
51     // path 表示当前路由规则匹配的hash地址
52     // component 表示当前路由规划对应要展示的组件
53     routes: [
54       {
55         path: '/home',
56         component: home
57       },
58       {
59         path: '/register',
60         component: register,
61         // 通过children 属性，为register 添加子路由规则
62         children: [
63           {
64             path: '/register/tab1',
65             component: tab1
66           },
67           {
68             path: '/register/tab2',
69             component: tab2
70           },
71         ]
72       }
73     ]
74   })
75 
76   var vm = new Vue({
77     el: '#app',
78     data: {
79 
80     },
81     components: {
82       'home': home,
83       'register': register,
84       'tab1': tab1,
85       'tab2': tab2
86     },
87     // 挂载路由
88     router
89   })
90 </script>
91 
92 </html>

动态路由匹配：

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

配置路由

1   var router = new VueRouter({
2     routes: [
3       // 动态路径参数 以冒号开头
4       {
5         path: '/user/:id',
6         component: UserList
7       }
8     ]
9   })

获取路由参数：

1 const UserList = { 2 // 路由组件中通过$route.params 获取路由参数 3 template: `<div>{{$route.params.id}} </div>` 4 }

路由组件传递参数：

$router 与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由节藕

1.props的值为布尔值类型

  var router = new VueRouter({
    routes: [
      {
        // 如果props 被设置为true， route.params 将会被设置为组件属性
        path: '/user',
        component: User,
        props: true
      }
    ]
  })

  const User = {
    props: ['id'],
    template: `<div>当前用户ID：{{id}</div>`
  }

2.1.props的值为对象类型

  var router = new VueRouter({
    routes: [
      {
        // 如果props 被设置为true， route.params 将会被设置为组件属性
        path: '/user',
        component: User,
        props: {
          name:'zhangsan',
          age:'18'
        }
      }
    ]
  })

  const User = {
    props: ['name', 'age'],
    template: `<div>{{name, age}}</div>`
  }

3.1.props的值为函数类型

 var router = new VueRouter({
    routes: [
      {
        // 如果props 被设置为true， route.params 将会被设置为组件属性
        path: '/user',
        component: User,
        props: route => ({
          name: 'zhangsan',
          age: '18',
          id: route.params.id
        })
      }
    ]
  })

  const User = {
    props: ['name', 'age', 'id'],
    template: `<div>{{name, age}}</div>`
  }

命名路由的配置规则：

 <touter-link :to='{name:"user", params:{id: 123}}'>User</touter-link>


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

编程式导航：

this.$router.push('/users') //调转到指定路径

this.$router.go(-1) // 前进后退

查看全文

相关阅读:
SpringBoot获取配置文件,就这么简单。
IDEA 插件推荐 —— 让你写出好代码的神器！
太高效了！玩了这么久的Linux，居然不知道这7个终端快捷键！
万字长文！一次性弄懂 Nginx 处理 HTTP 请求的 11 个阶段
 一个排查了大半天儿的问题，差点又让 MyBatis 背锅
 使用Flutter开发的抖音国际版
 一文回顾Redis五大对象(数据类型)
Gradle系列之初识Gradle
OpenJFX DJ 风格 Java 桌面音乐播放器
 【高并发】高并发秒杀系统架构解密，不是所有的秒杀都是秒杀！

原文地址：https://www.cnblogs.com/liea/p/11788123.html