第5章 Vue Router(路由)构建单页程序
1.Vue Router是什么
1.1是Vue.js的核心组件，由Vue.js官方维护的路由管理器
1.2通过路由器可以构建用户体验较高的单页应用程序
2.VueRouter构建一个单页应用程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue Router(路由)构建单页程序</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<!--引入必要的脚本 Vue.js 和Vue-Router.js注意：脚本引入的顺序-->
<style type="text/css">
a {
text-decoration: none;
color: black;
}
.router-link-active {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<router-link to="/stu">学生列表</router-link>
<router-link to="/tea">老师列表</router-link>
<!--定义导航组件<router-link>，使用to属性定义要跳转的路径，<router-link>会渲染成a标签-->
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 定义学生组件
const Student = { template: "<h3>学生组件列表</h3>" }
// 定义老师组件
const Teacher = { template: "<h3>老师组件列表</h3>" }
// 定义路由列表
const routers = [{ path: "/stu", component: Student }, { path: "/tea", component: Teacher }];//path 是路径 component 是自定义的组件名称
// 实例路由器
var router = new VueRouter({ routes: routers })
// 实例Vue，添加路由信息
const app = new Vue({
el: "#app",
router,//等价于 router:router
})
</script>
</body>
</html>
3.动态路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态路由</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<style type="text/css">
a {
text-decoration: none;
color: black;
}
.router-link-active {
text-decoration: none;
color: blue;
}
</style>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 动态路由 -->
<router-link to="/user/stu">学生列表</router-link>
<router-link to="/user/tea">老师列表</router-link>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 动态路由
// 值定义一个组件，变化的部分通过$route.params对象获取参数的信息
var User = {
template: "<h3>{{$route.params.name=='stu'?'学生':'老师'}}列表组件</h3>"
};
//定义动态路由列表
const routers = [{
path: "/user/:name",
component: User
}];
// 实例路由器
var router = new VueRouter({ routes: routers })
// 实例Vue，动态路由信息
const app = new Vue({
el: "#app",
router,//等价于 router:router
})
</script>
</body>
</html>
4.字符串路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>字符串</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 字符串 -->
<button @click="toStudent">学生列表</button>
<button @click="toTeacher">老师列表</button>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 字符串
//定义学生组件
var stuComponent = { template: "<div>学生组件列表</div>" }
//定义老师组件
var teaComponent = { template: "<div>老师组件列表</div>" }
//定义路由列表
var routers = [{ path: "/stu", component: stuComponent }, { path: "/tea", component: teaComponent }];
var router = new VueRouter({
routes: routers
})
const vm = new Vue({
el: "#app",
router,//等价于 router:router//es6属性简写
methods: {
//显示学生
toStudent() {
this.$router.push('/stu')
},
//显示老师
toTeacher() {
this.$router.push('/tea')
}
}
})
</script>
</body>
</html>
5.对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>对象</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 字符串 -->
<button @click="toStudent">学生列表</button>
<button @click="toTeacher">老师列表</button>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 字符串
//定义学生组件
var stuComponent = { template: "<div>学生组件列表</div>" }
//定义老师组件
var teaComponent = { template: "<div>老师组件列表</div>" }
//定义路由列表
var routers = [{ path: "/stu", component: stuComponent }, { path: "/tea", component: teaComponent }];
var router = new VueRouter({
routes: routers
})
const vm = new Vue({
el: "#app",
router,//等价于 router:router//es6属性简写
methods: {
//显示学生
toStudent() {
this.$router.push({path:'/stu'})
},
//显示老师
toTeacher() {
this.$router.push({path:'/tea'})
}
}
})
</script>
</body>
</html>
6.命名的路由
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>命名的路由</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 字符串 -->
<button @click="toStudent">学生列表</button>
<button @click="toTeacher">老师列表</button>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 字符串
//定义学生组件
var stuComponent = { template: "<div>学生组件列表</div>" }
//定义老师组件
var teaComponent = { template: "<div>老师组件列表</div>" }
//定义路由列表
var routers = [{name:"善良的死神", path: "/stu", component: stuComponent }, {name:"A5", path: "/tea", component: teaComponent }];
var router = new VueRouter({
routes: routers
})
const vm = new Vue({
el: "#app",
router,//等价于 router:router//es6属性简写
methods: {
//显示学生
toStudent() {
this.$router.push({ name: "善良的死神" })
},
//显示老师
toTeacher() {
this.$router.push({ name: "A5" })
}
}
})
</script>
</body>
</html>
7.带查询参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>带查询参数</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 字符串 -->
<button @click="toStudent">学生列表</button>
<button @click="toTeacher">老师列表</button>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 字符串
//定义学生组件
var stuComponent = { template: "<div>学生组件列表</div>" }
//定义老师组件
var teaComponent = { template: "<div>老师组件列表</div>" }
//定义路由列表
var routers = [
{ name: "善良的死神", path: "/stu/:id", component: stuComponent,params:true },
{ name: "A5", path: "/tea/:id", component: teaComponent,params:true }
];
var router = new VueRouter({
routes: routers
})
const vm = new Vue({
el: "#app",
router,//等价于 router:router//es6属性简写
methods: {
//显示学生
toStudent() {
this.$router.push({ name: "善良的死神", params: { id: 10 } })
},
//显示老师
toTeacher() {
this.$router.push({ name: "A5", params: { id: 100 } })
}
}
})
</script>
</body>
</html>
8.router.replace
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>router.replace5</title>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h1>使用Vue-Router路由制作单页程序</h1>
<div>
<!-- 字符串 -->
<button @click="toStudent">学生列表</button>
<button @click="toTeacher">老师列表</button>
</div>
<div>
<router-view></router-view>
<!-- 渲染与路由匹配的组件内容，默认显示第一个路由匹配的组件 -->
</div>
</div>
<script>
// 字符串
//定义学生组件
var stuComponent = { template: "<div>学生组件列表</div>" }
//定义老师组件
var teaComponent = { template: "<div>老师组件列表</div>" }
//定义路由列表
var routers = [
{ name: "善良的死神", path: "/stu/:id", component: stuComponent, params: true },
{ name: "A5", path: "/tea/:id", component: teaComponent, params: true }
];
var router = new VueRouter({
routes: routers
})
const vm = new Vue({
el: "#app",
router,//等价于 router:router//es6属性简写
methods: {
//显示学生
toStudent() {
this.$router.replace({ name: "善良的死神", params: { id: 10 } })
},
//显示老师
toTeacher() {
this.$router.replace({ name: "A5", params: { id: 100 } })
}
}
})
</script>
</body>
</html>
