五:前端路由

最新推荐文章于 2024-06-11 19:04:21 发布

是翼不是一

最新推荐文章于 2024-06-11 19:04:21 发布

阅读量216

点赞数

分类专栏： Vue

原文链接：https://blog.csdn.net/yexiangCSDN/article/details/117359553

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一:概述

路由是一个比较广义和抽象的概念,路由的本质就是对应的关系。
在开发中:
后端路由
前端路由

后端路由：

概念：根据不同的用户URL请求，返回不同的内容。
本质：URL请求地址与服务器资源之间的对应关系
在这里插入图片描述

路由

SPA(Single Page Application)

后端渲染(存在性能问题)
Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作).
SPA(single Page Applicatin)单页面应用程序；整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作。
SPA实现原理之一:基于URL地址的Hash(hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求)
在实现SPA过程中,最核心的技术点就是前端路由。

实现简易的前端路由

基于URL中hasg实现(点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换).

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

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
  </head>
  <body>
    <!-- 被 vue 实例控制的 div 区域 -->
    <div id="app">
      <!-- 切换组件的超链接 -->
      <a href="#/zhuye">主页</a> 
      <a href="#/keji">科技</a> 
      <a href="#/caijing">财经</a>
      <a href="#/yule">娱乐</a>

      <!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
      <!-- 可以把 component 标签当做是【组件的占位符】 -->
      <component :is="comName"></component>
    </div>

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

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

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

      // 娱乐组件
      const yule = {
        template: '<h1>娱乐信息</h1>'
      }
      // #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.2Vue Router
它和Vue.js的核心深度集成，可以非常方便的用于SPA应用程序的开发。
Vue Router包含的功能的有:

支持HTML5历史模式或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

Vue Router的基本使用

使用步骤:
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>

2:添加路由链接

//router-link是vue中提供的标签，默认会被渲染为a 标签
 //to属性默认会被渲染href属性
// to属性的值默认会被渲染为#开头的hash地址

 <router-link to="/user">User</router-link>
 <router-link to="/register">Register</router-link>

3:添加路由填充位

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

4:定义路由组件

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

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

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

6:把路由挂载到Vue根实例中。

new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // 为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上。
        router
      })

代码:

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

在这里插入图片描述

路由的重定向

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

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

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          {path:'/',redirect:'/user'},
          { path: '/user', component: User },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

嵌套路由用法

1:嵌套路由功能分析：
点击父级路由链接显示模板内容
模板内容中又有子级路由链接
点击子级路由链接显示子级路由模板内容
2:父路由组件模板
父路由链接
父组件路由填充位。

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

3:子级路由模板
子级路由链接
子级路由填充位

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

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

const 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}
		]
		}
	]
})

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }

      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          <!-- 子路由链接 -->
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          <!-- 子路由的占位符 -->
          <router-view />
        <div>`
      }
      
      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }
      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          // children 数组表示子路由规则
          { path: '/register', component: Register, children: [
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

动态匹配路由的基本用法

思考：

<!-- 有如下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/2',component:User}

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

var router = new VueRouter({
	routes:[
	//动态路由参数，以冒号开头
	{path:'/user/:id',component:User}
]
})

const User ={
	//路由组件中通过$route.params获取路由参数
	template:'<div>User{{$route.params.id}}<div>'
}

路由组件传递参数

$route与对应路由形成高度耦合，不够灵活，所以可以使用props将组件和路由解耦。
1.props的值为布尔类型：

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

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
          props:['id'],
        template: '<h1>User 组件 -- 用户id为: {{id}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User,props:true},
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

2：props的值为对象类型

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

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props: { uname: 'lisi', age: 20 } },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

3:props的值为函数类型

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

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link to="/user/3">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user'},
          { path: '/user/:id', component: User, props:route =>({
              uname:'zs',age:12,id:route.params.id
          }) },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

vue-router命名路由

命名路由的匹配规则

为了更加方便的表示路由的路径，可以给路由规则起一个别名，即为“命名路由”
例如：

const routr =new VueRouter({
	routes:[
	{
		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}})

<!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>Document</title>
    <!-- 导入 vue 文件 -->
    <script src="./lib/vue_2.5.22.js"></script>
    <script src="./lib/vue-router_3.0.2.js"></script>
  </head>
  <body>
    <!-- 被 vm 实例所控制的区域 -->
    <div id="app">
      <router-link to="/user/1">User1</router-link>
      <router-link to="/user/2">User2</router-link>
      <router-link :to="{ name: 'user', params: {id: 3} }">User3</router-link>
      <router-link to="/register">Register</router-link>

      <!-- 路由占位符 -->
      <router-view></router-view>
    </div>

    <script>
      const User = {
        props: ['id', 'uname', 'age'],
        template: '<h1>User 组件 -- 用户id为: {{id}} -- 姓名为:{{uname}} -- 年龄为：{{age}}</h1>'
      }

      const Register = {
        template: '<h1>Register 组件</h1>'
      }

      // 创建路由实例对象
      const router = new VueRouter({
        // 所有的路由规则
        routes: [
          { path: '/', redirect: '/user' },
          {
            // 命名路由
            name: 'user',
            path: '/user/:id',
            component: User,
            props: route => ({ uname: 'zs', age: 20, id: route.params.id })
          },
          { path: '/register', component: Register }
        ]
      })

      // 创建 vm 实例对象
      const vm = new Vue({
        // 指定控制的区域
        el: '#app',
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

Vue Router编程式导航

声明式导航:通过点击链接实现导航的方式，叫做声明式导航。
例如：网页中链接或者Vue中

编程式导航:通过调用JavaScript形式的API实现导航的方式，叫做编程式导航。
例如：普通网页中的location.href

编程式导航基本用法：

常用的编程式导航API如下:

this.$router.push('hash地址’）
this.$router.go(n)

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

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'}})