Vue基础 前端路由
路由
本质是对应关系
1、后端路由
概念:根据不同的用户URL请求,返回不同的内容
本质:URL请求地址与服务器资源之间的对应关系
2、SPA
单页应用程序,整个网站只有一个页面,内容变化通过ajax局部更新实现,支持浏览器的前进后退操作
实现原理:基于url地址的hash(hash的变化会导致浏览器记录访问历史的变化,但不会触发新的url请求),核心技术是前端路由
3、前端路由
概念:根据不同的用户事件,显示不同的页面内容
本质:用户事件与事件处理函数之间的对应关系
模拟路由
<div id="app">
<a href="#ldh">ldh</a>
<a href="#zxy">zxy</a>
<a href="#lm">lm</a>
<a href="#gfc">gfc</a>
<component :is="msg"></component>
</div>
<script type="text/javascript">
var ldh = {
template:`<h1>刘德华</h1>`
}
var zxy = {
template:`<h1>张学友</h1>`
}
var lm = {
template:`<h1>黎明</h1>`
}
var gfc = {
template:`<h1>郭富城</h1>`
}
const vm = new Vue({
el:"#app",
data:{
msg:"ldh"
},
components:{
ldh:ldh,
zxy:zxy,
lm:lm,
gfc:gfc
}
})
window.onhashchange = function(){
switch(location.hash.slice(1)){
case 'ldh':
vm.msg = "ldh"
break
case 'zxy':
vm.msg = "zxy"
break
case 'lm':
vm.msg = "lm"
break
case 'gfc':
vm.msg = "gfc"
break
}
}
</script>
Vue-router
功能:
1、支持html5历史模式或hash模式
2、支持嵌套路由
3、支持路由参数
4、支持编程式路由
5、支持命名路由
步骤:
1、引入库文件
直接下载/CDN:https://unpkg.com/vue-router/dist/vue-router.js
或:npm install vue-router
2、添加路由链接
使用<router-link to="/..."></router-link>
router-link是vue提供的标签,默认被渲染为a标签
to属性默认被渲染为href属性
to属性值默认被渲染为#开头的hash地址
3、添加路由填充位
也叫路由占位符。将来通过路由规则匹配到的组件,会被渲染到router-view标签所在的位置<router-view></router-view>
4、定义路由组件
采用对象形式定义组件内容
5、配置路由规则并创建路由实例
通过VueRouter构造函数的实例对象属性routes创建路由规则,routes是一个数组,里面每一个对象都是一个规则,规则至少包含path和component两个属性,path指路由的hash值,component指对应的hash注册对应的组件
6、把路由挂载到vue根实例中
使用router名称挂载即可
<div id="app">
<router-link to="/user">user</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
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
}
]
})
const vm = new Vue({
el:"#app",
router
})
</script>
路由重定向
通过redirect属性进行重定向
{
path:'/',
redirect:"/user"
}
嵌套路由
1、设置父模板
2、对应的父模板下定义子模板
3、对应的父规则下定义子规则
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/user">user</router-link>
<router-link to="/register">register</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
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></router-view>
</div>
`
}
const Tab1 = {
template:"<h4>tab1页</h4>"
}
const Tab2 = {
template:"<h4>tab2页</h4>"
}
const router = new VueRouter({
routes:[
{
path:'/',
redirect:"/user"
},
{
path:'/user',
component:User
},
{
path:'/register',
component:Register,
children:[
{
path:"/register/tab1",
component:Tab1
},
{
path:"/register/tab2",
component:Tab2
}
]
}
]
})
const vm = new Vue({
el:"#app",
router
})
</script>
</body>
</html>
动态路由匹配
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>
const User = {
template:"<h1>user页id={{$route.params.id}}</h1>"
}
{
path:'/user/:id',
component:User
},
路由参数
通过props属性进行传递
props可以为布尔值类型、对象类型、函数类型
布尔值类型:
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>
const User = {
props:["id"],
template:"<h1>user页id={{id}}</h1>"
}
{
path:'/user/:id',
component:User,
props:true
},
对象类型:
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>
const User = {
props:["username","age"],
template:"<h1>user页{{username+age}}</h1>"
}
{
path:'/user/:id',
component:User,
props:{username:"zhangsan",age:20}
},
函数类型:
<router-link to="/user/1">user1</router-link>
<router-link to="/user/2">user2</router-link>
<router-link to="/user/3">user3</router-link>
const User = {
props:["id","username","age"],
template:"<h1>user页{{username+age+id}}</h1>"
}
{
path:'/user/:id',
component:User,
props:(route) => ({
username:"lisi",
age:40,
id:route.params.id
})
},
命名路由
<router-link :to={name:"user",params:{id:3}}>user3</router-link>
{
name:"user",
path:'/user/:id',
props:(route) => ({
username:"lisi",
age:40,
id:route.params.id
})
},
编程式导航
$route.push():跳转到指定路由
$route.go():值为1为前进,-1为后退
push():参数规则:
1、字符串(路径名称)
router.push("/home")
2、对象
router.push({path:"/home"})
3、命名的路由(传递参数)
router.push({name:’/user’,params:{id:123}})
4、带查询参数,变成/register?id=123
router.push({path:’/register’,query:{id:123}})
const User = {
props:["id","username","age"],
template:`
<div>
<h1>user页{{username+age+id}}</h1>
<button @click="handle">点我跳转</button>
</div>
`,
methods:{
handle:function(){
this.$router.push('/register')
}
}
}
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></router-view>
<button @click="goback">点我后退</button>
</div>
`,
methods:{
goback:function(){
this.$router.go(-1)
}
}
}
案例
路由管理
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./bootstrap.css">
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script src="vue-router.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script type="text/javascript">
const App = {
template:`
<div>
<div>
<ul class="nav nav-pills">
<li role="presentation"><router-link to="/home">Home</router-link></li>
<li role="presentation"><router-link to="/profile">Profile</router-link></li>
<li role="presentation"><router-link to="/messages">Messages</router-link></li>
<li role="presentation"><router-link to="/more">More</router-link></li>
<li role="presentation"><router-link to="/love">Love</router-link></li>
</ul>
</div>
<div>
<router-view></router-view>
</div>
</div>
`
}
const home = {
data(){
return {
list:[
{
id:1,
name:"刘德华",
age:20
},
{
id:2,
name:"张学友",
age:30
},
{
id:3,
name:"郭富城",
age:40
},
{
id:4,
name:"黎明",
age:50
}
]
}
},
template:`
<div>
<h1>Home</h1>
<table class="table table-striped">
<thead>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<a href="javascript:;" @click="handle(item.id)">详情</a>
</td>
</tr>
</tbody>
</table>
</div>
`,
methods:{
handle:function(id){
this.$router.push("/userInfo/"+id)
}
}
}
const userInfo ={
props:["id"],
template:`<h1>详情页+---+{{id}}</h1>`
}
const profile = {
template:`<h1>Profile</h1>`
}
const messages = {
template:`<h1>Messages</h1>`
}
const more = {
template:`<h1>More</h1>`
}
const love = {
template:`<h1>Love</h1>`
}
const router = new VueRouter({
routes:[
{
path:"/",
component:App,
redirect:"/home",
children:[
{
path:"/home",
component:home
},
{
path:"/userInfo/:id",
component:userInfo,
props:true
},
{
path:"/profile",
component:profile
},
{
path:"/messages",
component:messages
},
{
path:"/more",
component:more
},
{
path:"/love",
component:love
}
]
}
]
})
const vm = new Vue({
el:"#app",
router
})
</script>
</body>
</html>
本文地址:https://blog.csdn.net/weixin_42667066/article/details/109236865
上一篇: 免费加入拼多多互助砍价群,还能领取拼多多大额隐藏无门槛优惠券
下一篇: 做银耳汤什么时候放糖