[Vue.js] 路由 -- 前端路由

路由的基本概念与原理

路由

本质是对应关系

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

前端路由
- 概念 : 根据不同的用户事件,显示不同的页面内容
- 本质 : 用户事件 与事件处理函数之间的对应关系

实现简易前端路由
- 基于URL中的hash实现(点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换)

Vue Router

Vue Router官网

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

vue-router的基本使用

基本使用步骤

引入相关的库文件

添加路由链接

添加路由填充位

定义路由组件

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

把路由挂载到Vue根实例中

引入相关的库文件
- 导入vue文件，为全局window 对象挂载 vue 构造函数
- 导入vue-router 文件，为全局 window对象挂载VueRouter 构造函数

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.4.8/dist/vue-router.js"></script>

添加路由链接

<!-- router-link是vue中提供的标签，默认会被渲染为a标签--><!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的 hash 地址-->
<router-link to="/ user">User</router-link>
<router-link to="/ register">Register</router-link>

添加鲈鱼填充位

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

定义路由组件

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

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

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

把路由挂载到Vue根实例中

new vue ({el: '#app ',//为了能够让路由规则生效，必须把路由对象挂载到vue实例对象上router
});

路由重定向

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

通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向:

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

vue-router嵌套路由

嵌套路由用法

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

<div id="app"><router-link to="/user">User</router-link><router-link to="/register">Register</router-link><!--  路由占位符  --><router-view></router-view>
</div>

子级路由模板
- 子级路由链接
- 子级路由填充位

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>`
}

嵌套路由配置
- 父级路由通过children属性配置子级路由

const router = new VueRouter ({routes : [{ path: '/user', component: User },{path: '/register',component: Register,//通过children属性，为/register 添加子路由规则children: [{ path: '/register/tabl' , component: Tab1 },{ path: '/register/tab2' , component: Tab2 }]}]
})

vue-router动态路由匹配

基本用法

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

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

路由组件传递参数

使用props将组件和路由解耦

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>'//使用路由参数

props的值为对象类型

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

访问不到id

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

vue-router命名路由

命名路由的配置规则

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

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

vue-router编程式导航

页面导航的两种方式

声明式导航 : 通过点击链接实现导航的方式，叫做声明式导航
- 例如:普通网页中的< a >< /a >链接或vue 中的< router-link >< /router-link >
编程式导航 : 通过调用JavaScript形式的API实现导航的方式，叫做编程式导航
- 例如 : 普通网页中的location.href

编程式导航基本用法

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

[Vue.js] 路由 -- 前端路由相关推荐

Vue.js 现代前端开发的利器
Vue.js: 现代前端开发的利器作者:阿发家的阿花引言在当今的前端开发领域,Vue.js已经成为最受欢迎的JavaScript框架之一.它的简洁性.灵活性和强大的功能使其成为许多开发者首选的工 ...
前端路由||路由的基本概念与原理||在开发中，路由分为：  后端路由  前端路由
前端路由路由的基本概念与原理 vue-router的基本使用 vue-router嵌套路由 vue-router动态路由匹配 vue-router命名路由 vue-router编程式导航基于vue ...
Vue.js高效前端开发知识 • 【目录】
持续更新中- 章节内容实践练习 Vue.js高效前端开发 • (实践练习) 第1章 Vue.js高效前端开发 • [ 一.初识Vue.js ] 第2章 Vue.js高效前端开发 • [ 二.Vue ...
Vue学习之前端路由
前端路由什么是前端路由路由是根据不同的url地址展示不同的内容或页面前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,之前是通过服务端根据url的不同返回不同的页面实现的什么时候使 ...
Vue Router：vue中实现前端路由
Vue Router 官方文档文章目录一.路由简介路由分类路由安装二.路由基本使用安装路由器并设置路由规则实现路由切换指定组件的呈现位置 this中的 $router 和 $route ...
director.js实现前端路由
注:director.js的官网 https://github.com/flatiron/director director.js是什么? 理解:前端的route框架,director.js客户端的路 ...
js路由在php上面使用,director.js实现前端路由使用实例
做过后端开发,尤其是使用过类似Django或者express对服务器端的路由功能应该都比较熟悉,国外流行的博客系统wordpress也是非常经典的路由实现案例.那么,究竟什么的路由呢,下面通过word ...
纯html页面怎么进行路由,前端路由一探
什么是前端路由路由,引导.指路之意. 譬如我们熟知的路由器,蹦跶在网络层的数据包转发设备,在网络中也是扮演着指路明灯的角色,肩负着将数据包正确导向目的地址的重任. 前端路由也借用了这个词,但是承担的 ...
html vue分页,Vue.js bootstrap前端实现分页和排序
写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足 ...

[Vue.js] 路由 -- 前端路由

路由的基本概念与原理

路由

Vue Router

vue-router的基本使用

基本使用步骤

路由重定向

vue-router嵌套路由

嵌套路由用法

vue-router动态路由匹配

基本用法

路由组件传递参数

vue-router命名路由

命名路由的配置规则

vue-router编程式导航

页面导航的两种方式

编程式导航基本用法

编程式导航参数规则

[Vue.js] 路由 -- 前端路由相关推荐

最新文章

热门文章