Vue前端路由

Vue 前端路由

1.路由的基本概念与原理

1.1路由

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

• 后端路由
• 前端路由

1.后端路由

• 概念: 根据不同的用户URL请求，返回不同的内容
• 本质: URL请求地址与服务器资源之间的对应关系

2.前端路由（SPA）

1.SPA

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

2.前端路由

• 概念: 根据不同的用户事件，显示不同的页面内容
• 本质: 用户事件与事件处理函数之间的对应关系

3.实现简易的前端路由

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

  

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

1.2Vue Router

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

vue Router包含的功能有:

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

2.vue-router的基本使用

2.1基本使用步骤

1. 引入相关的库文件
2. 添加路由链接
3. 添加路由填充位
4. 定义路由组件
5. 配置路由规则并创建路由实例
6. 把路由挂载到 Vue 根实例中

2.2路由重定向

路由重定向指的是: 用户在访问地址 a的时候，强制用户跳转到地址c，从而展示特定的组件页面;

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

3.vue-router嵌套路由

3.1.嵌套路由用法

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

4.vue-router动态路由匹配

4.1动态匹配路由的基本用法

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

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

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

4.2路由组件传递参数

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

1.props的值为布尔类型

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

5.vue-router编程式导航

5.1页面导航的两种方式

• 声明式导航:通过点击链接实现导航的方式，叫做声明式导航
  例如:普通网页中的 <a></a> 链接或 vue 中的 <router-link></router-link>
• 编程式导航:通过调用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');
        }
    }
}

5.2编程式导航参数规则

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

6.vue-router命名路由

6.1命名路由的匹配规则

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

const router = 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 }})