1、vue-router的基本使用
- 引入相关的库文件
- 添加路由连接
router-link是vue中提供的标签,默认会被渲染为a标签
to属性默认会被渲染为href属性
to属性的值默认会被渲染为#开头的hash地址
<div id="app">
<router-link to="/user">User</router-link>
<router-link to="/register">Register</router-link>
</div>
- 添加路由填充位
路由填充位(也叫路由占位符)
将来通过路由规则匹配到的组件,将会被渲染到router-view所在的位置
<router-view></router-view>
- 定义路由组件
let User={
template:`<div>User</div>`
}
let Register={
template:`<div>Register</div>`
}
- 配置路由规则并创建路由实例
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/user',
component:User
},
{
path:'/register',
component:Register
},
]
}
)
- 把路由挂载到vue根实例中去
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
完整客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--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>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
template:`<div>User</div>`
}
let Register={
template:`<div>Register</div>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/user',
component:User
},
{
path:'/register',
component:Register
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
服务器端代码
const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const app = express();
// 启动静态资源服务
app.use(express.static('public'));
// 设置允许跨域访问该服务
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Headers', 'mytoken');
next();
});
// 处理请求参数
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 监听端口
app.listen(3000,()=>{
console.log('running...');
});
2、路由重定向
路由重定向指的是:用户在访问地址A的时候,强制用户跳转到地址c,从而展示特定的组件页面
通过路由规则的redirect属性,指定一个新的路由地址,可以很方便地设置路由的重定向
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
path:'/user',
component:User
},
{
path:'/register',
component:Register
},
]
}
)
3、嵌套路由
1、嵌套路由功能分析
- 点击父级路由链接显示模板内容
- 模板内容中又有子级路由链接
- 点击子级路由练剑显示自己模板内容
2、父级路由组件模板
- 父级路由链接
- 父组件路由填充位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--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>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
template:`<div>User</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component: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:router,
data:{
}
})
</script>
</body>
</html>
4、动态匹配路由
将路由中变动的部分作为动态参数进行匹配,就是动态路由匹配
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//路由组件中通过$router.params获取路由参数
template:`<div>User组件---{{$route.params.id}}组件</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
path:'/user/:id',
component:User
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
5、props路由组件传递参数
1、props指定为布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//使用props接受路由参数
props:['id'],
//路由组件中通过$router.params获取路由参数
template:`<div>User组件---{{id}}组件</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
//如果props被设置成为true,route.params将会被设置为组件属性
path:'/user/:id',
component:User,
props:true
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
2、props指定为对象类型值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//使用props接受路由参数
props:['id','name','age'],
//路由组件中通过$router.params获取路由参数
template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
//如果props被设置成为true,route.params将会被设置为组件属性
path:'/user/:id',
component:User,
props: {
name:'zhagnsan',
age:34
}
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
3、props指定为函数类型值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//使用props接受路由参数
props:['id','name','age'],
//路由组件中通过$router.params获取路由参数
template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
//如果props被设置成为true,route.params将会被设置为组件属性
path:'/user/:id',
component:User,
props: route=>({
name:'lisi',
age:33,
id:route.params.id
})
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
6、命名路由的配置规则
为了更加方便的表示路由的路径,可以给路由规则起一个别名,即为‘命名路由’
注意to前面要加:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//使用props接受路由参数
props:['id','name','age'],
//路由组件中通过$router.params获取路由参数
template:`<div>User组件---{{id}},{{name}},{{age}}组件</div>`
}
let 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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
name:'user',
//如果props被设置成为true,route.params将会被设置为组件属性
path:'/user/:id',
component:User,
props: route=>({
name:'lisi',
age:33,
id:route.params.id
})
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>
7、vue-router编程式导航
声明式导航:通过点击链接实现导航的方式,叫做声明式导航
如普通的a链接
编程式导航:通过调用JavaScript形式的api实现导航的方式,叫做编程式导航
如,普通网页中的location.href
常用的编程式导航API如下:
- this.$router.push(‘hash地址’)
- this.$router.go(n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
here is index page
<!--router-link是vue中提供的标签,默认会被渲染为a标签-->
<!-- to属性默认会被渲染为href属性-->
<!-- to属性的值默认会被渲染为#开头的hash地址-->
<router-link to="/user">User</router-link>
<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></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
//创建路由组件
let User={
//使用props接受路由参数
props:['id','name','age'],
methods:{
//用编程的方式控制路由跳转
goRegister:function () {
this.$router.push('/register')
}
},
//路由组件中通过$router.params获取路由参数
template:`<div><button @click='goRegister'> 跳转到注册页面</button> </div>`
}
let Register={
methods:{
goback:function () {
this.$router.go(-1)
}
},
template:`<div>
<button @click="goback">后退</button>
<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>`
}
let Tab1={
template:`<h3>我是table1子组件</h3>`
}
let Tab2={
template:`<h3>我是table2子组件</h3>`
}
//配置路由规则并创建路由实例
let router=new VueRouter(
{
routes:[
//每个路由规则都是一个配置对象,其中至少包含path和component两个属性:
//path表示当前路由规则匹配的hash地址
//component表示当前路由规则对应要展现的组件
{
path:'/',
component:User
},
{
name:'user',
//如果props被设置成为true,route.params将会被设置为组件属性
path:'/user/:id',
component:User,
props: route=>({
name:'lisi',
age:33,
id:route.params.id
})
},
{
path:'/register',
component:Register,
children:[
{path:'/register/tab1',component:Tab1},
{path:'/register/tab2',component:Tab2}
]
},
]
}
)
const vm=new Vue({
el:'#app',
router:router,
data:{
}
})
</script>
</body>
</html>