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) // 前进后退

查看全文

相关阅读:
LeetCode 81 Search in Rotated Sorted Array II（循环有序数组中的查找问题）
LeetCode 80 Remove Duplicates from Sorted Array II（移除数组中出现两次以上的元素）
LeetCode 79 Word Search（单词查找）
LeetCode 78 Subsets （所有子集）
LeetCode 77 Combinations(排列组合)
LeetCode 50 Pow(x, n) （实现幂运算）
LeetCode 49 Group Anagrams（字符串分组）
LeetCode 48 Rotate Image（2D图像旋转问题）
LeetCode 47 Permutations II（全排列）
LeetCode 46 Permutations（全排列问题）

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