Vue学习笔记4--vue-router路由
vue-router前端路由
完整的基础篇笔记PDF下载，完全手打有用的话请给个赞呗Thanks♪(･ω･)ﾉ
路由的基本概念
本质
路由本质是对应关系
路由分类
-
后端路由
概念：根据用户的URL请求返回不同内容 本质：URL请求地址与服务器资源之间的对应关系 -
前端路由
概念：根据不用的用户事件，显示不用的页面内容 本质：用户事件和事件处理函数之间的对应关系
实现简单的前端路由
- 基于URL中的hash实现（点击菜单的时候改变URL的hash，根据hash的变化控制组件的切换）
window.onhashchange = function(){
console.log(location.hash);
}
Demo
<body>
<div id="app">
<a href="#/zhuye">主页a>
<a href="#/keji">科技a>
<a href="#/caijing">财经a>
<a href="#/yule">娱乐a>
<component :is="comName">component>
div>
<script>
const zhuye = {
template: '主页信息
'
}
const keji = {
template: '科技信息
'
}
const caijing = {
template: '财经信息
'
}
const yule = {
template: '娱乐信息
'
}
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
components: {
zhuye,
keji,
caijing,
yule
}
});
//监听页面hash值的变化
window.onhashchange = function(){
vm.comName = location.hash.slice(2);
}
script>
body>
vue-router的基本使用
Vue.js官方的路由器，和Vue.js核心深度集成
功能
- 支持H5的历史模式和hash模式
- 支持嵌套路由
- 支持路由参数
- 支持编程式路由
- 支持命名路由
使用步骤
-
引入相关库文件
<script src="js/vue.js">script> <script src="js/vue-router.js">script> -
添加路由链接
<router-link to="/user">Userrouter-link> -
添加路由填充位
<router-view>router-view> -
定义路由组件
var User = { template: 'User
' } var Register = { template: 'Register
' } -
配置路由规则并创建路由实例
const router = new VueRouter({ //存放路由规则的数组 routes: [ //每个路由规则是一个配置对象，至少包含path和component两个属性 //path: 当前路由规则匹配的hash地址 //component： 便是当前路由规则对应的组件 {path:'/user',component: User}, {path: '/register',component: Register} ] }) -
把路由挂载到Vue实例中
const vm = new Vue({ el: '#app', data: { comName: 'zhuye' }, //配置 //router: router 对应一致时可以简写 router });
路由重定向
用户在访问地址A的时候，强制用户跳转到地址C，从而展示特定页面
默认进入页面地址为：http://127.0.0.1:5500/index.html#/
希望进入: http://127.0.0.1:5500/index.html#/user
使用redirect属性配置
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
{path: '/', redirect: '/user'},
{path:'/user',component: User},
{path: '/register',component: Register}
]
})
vue-router嵌套路由
分析
- 点击父级路由链接显示模板内容
- 模板内容内容中又有自己路由链接
- 点击子级路由链接显示子级模板内容
步骤
- 创建父级路由链接和父级路由填充位
<router-link to="/user">Userrouter-link>
<router-link to="/register">Registerrouter-link>
<router-view>router-view>
- 定义路由组件
var User = {
template: 'User 组件
'
}
var Register = {
template: `
Register 组件
Tab1
Tab2
Tab1
'
}
var Tab2 = {
template: 'Tab1
'
}
- 嵌套路由配置
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
{path: '/', redirect: '/user'},
{path:'/user',component: User},
{
path: '/register',
component: Register,
//嵌套子路由
children: [
{path: '/register/tab1',component: Tab1},
{path: '/register/tab2',component: Tab2}
]
}
]
})
- Vue实例中挂载router
const vm = new Vue({
el: '#app',
data: {
comName: 'zhuye'
},
//配置
//router: router 对应一致时可以简写
router
});
vue-router动态匹配路由
基本用法
const router1 = new VueRouter({
routers: [
//动态路由路径参数 冒号开头
{path: '/user/:id',component: User}
]
})
组件中获取id值
const User = {
//通过 $route.params 获取参数
template: 'User {{ $route.params.id }}'
}
Demo
- 路由链接和路由填充位
<router-link to="/user/1">User1router-link>
<router-link to="/user/2">User2router-link>
<router-link to="/user/3">User3router-link>
<router-view>router-view>
- 组件
const User = {
//通过 $route.params 获取参数
template: 'User {{$route.params.id}} 组件'
}
- 定义路由实例
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
{path: '/', redirect: '/user'},
//动态路由路径参数 冒号开头
{path:'/user/:id',component: User},
]
})
- Vue实例中挂载router
const vm = new Vue({
el: '#app',
data: {
},
//配置
//router: router 对应一致时可以简写
router
});
传参方式
- $route.params : 与对应路由高度耦合，不灵活
- props：组件和路由解耦
props 使用
- 定义props的值为布尔类型
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
//props 值设置为true route.params 将会被设置为组件属性
{path: '/', redirect: '/user'},
//动态路由路径参数 冒号开头
{path:'/user/:id',component: User, props: true},
]
})
- 组件获取使用props获取属性
const User = {
//使用props获取路由参数
props: ['id'],
//通过 $route.params 获取参数
template: 'User {{ id }} 组件'
}
props还可以是一个对象
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
//props 值设置为true route.params 将会被设置为组件属性
{path: '/', redirect: '/user'},
//动态路由路径参数 冒号开头
{path:'/user/:id',component: User, props: {uname: 'test', age: 11 }},
]
})
注：此时id值无法访问
使用id的值方式如下：
const router = new VueRouter({
//存放路由规则的数组
routes: [
//每个路由规则是一个配置对象，至少包含path和component两个属性
//path: 当前路由规则匹配的hash地址
//component： 便是当前路由规则对应的组件
//props 值设置为true route.params 将会被设置为组件属性
{path: '/', redirect: '/user'},
//动态路由路径参数 冒号开头
{
path:'/user/:id',
component: User,
//此时id的值和usname的值等都可使用
props: route => ({uname: 'lisi' , age: 20, id: route.params.id })
},
]
})
vue-router命名路由
概念
为了更加方便的表示路由的路径，给路由规则起一个别名，即为：命名路由
const router = new VueRouter({
//存放路由规则的数组
routes: [
{path: '/', redirect: '/user'},
//动态路由路径参数 冒号开头
{
name: 'user',
path:'/user/:id',
component: User,
props: true
}
]
})
页面跳转使用命名路由(to属性要添加 ：)
<router-link :to="{ name: 'user', params: {id: 123} }">User1vue-router编程式导航
常见页面导航方式
- 声明式导航
<a>a>
<router-link>router-link>
- 编程式导航：通过调用JavaScript的API实现导航方式
location.href=
Vue中的编程式导航
this.$router.push('hash地址')
//n是历史记录 1：表示历史记录中前进1位 -1：表示历史记录中后退1位
this.$router.go(n)
Demo
push
const User = {
//使用props获取路由参数
props: ['id'],
//通过 $route.params 获取参数
template: `
User {{id}} 组件
`,
methods: {
goRegister(){
//跳转指定页面
this.$router.push('/register')
}
}
}
go
var Register = {
template: `
Register 组件
Tab1
Tab2
push方法参数
//字符串
router.push('/home')
//对象
router.push({ path: '/home' })
//命名路由 携带参数
router.push({name: 'user', params: { user: 'test'} })
//查询参数 /register?name=test
router.push({ path: '/register', query: { name: 'test' } })