一.文章导读
路由的本质就是一种对应关系，在代码程序中，一个a标签跳转页面，里面a标签里面需要写对用页面的路径，或者写跳转后台的服务。那么这个路径就与页面相对应，我们可以将它视为路由的一种形式。
路由分为前端路由和后端路由
- 后端路由是由服务器端进行实现，并完成资源的分发
- 前端路由是依靠hash值(锚链接)的变化进行实现
下面学习vue的路由管理器：Vue Router
二.路由入门实例
1. 选项卡案例
<body>
<div id="app">
<!-- 定义table选项卡头 #号代表锚点必须 -->
<a href="#/tab1">tab1</a>
<a href="#/tab2">tab2</a>
<a href="#/tab3">tab3</a>
<a href="#/tab4">tab4</a>
<!-- 定义内容 -->
<div class="tablebody">
<!-- 根据 tablename的值变换而变换显示组件 -->
<component :is="tablename"></component>
</div>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
定义四个组件模板,与a标签一一对应
*/
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}
const vm = new Vue({
el: "#app",
data: {
tablename: "tab1"
},
// 注册 私有组件
components: {
tab1,
tab2,
tab3,
tab4
}
});
//window.onhashchange 获取最新的hash值并将hash值截取将该值赋值给实例的 tablename
window.onhashchange = function() {
// location.hash 获取当前最新的hash值
console.log(location.hash);
// 截取hash值赋值给 tablename
vm.tablename = location.hash.slice(2);
/* switch(location.hash.slice(1)){
case '/tab1':
vm.tablename = 'tab1'
break
case '/tab2':
vm.tablename = 'tab2'
break
case '/tab3':
vm.tablename = 'tab3'
break
case '/tab4':
vm.tablename = 'tab4'
break
} */
}
</script>
<!-- // 加点样式 -->
<style type="text/css">
#app {
500px;
height: 300px;
border: 1px solid black;
}
#app a {
display: inline-block;
100px;
padding: 10px;
}
.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>
三.Vue Router使用
1.Router简介
它是一个Vue.js官方提供的路由管理器。是一个功能更加强大的前端路由器，推荐使用。
Vue Router和Vue.js非常契合，可以一起方便的实现SPA(single page web application,单页应用程序)应用程序的开发。
Vue Router依赖于Vue，所以需要先引入Vue，再引入Vue Router
Vue Router的特性：
支持H5历史模式或者hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由
支持路由导航守卫
支持路由过渡动画特效
支持路由懒加载
支持路由滚动行为
2.Vue Router使用
<html>
<head>
<meta charset="utf-8">
<title>vueRouter使用</title>
<!-- // 第一步导入vue-router_3.0.2.js vue-router依赖于vue.js 在后面导入 -->
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 第二步 将上面的代码copy一下-->
<div id="app">
<!--
将原先的a标签修改为 <router-link> 标签
router-link相当于a标签中的a to相当于href
-->
<router-link to="/tab1">tab1</router-link>
<router-link to="/tab2">tab2</router-link>
<router-link to="/tab3">tab3</router-link>
<router-link to="/tab4">tab4</router-link>
<!-- 定义内容 -->
<div class="tablebody">
<!-- 3. 添加路由占位符,存放组件 -->
<router-view></router-view>
<!-- <component :is="tablename"></component> -->
</div>
</div>
</div>
<script type="text/javascript">
/*
定义四个组件模板,与a标签一一对应
*/
const tab1 = {
template: '<strong>table01</strong>'
}
const tab2 = {
template: '<strong>table02</strong>'
}
const tab3 = {
template: '<strong>table03</strong>'
}
const tab4 = {
template: '<strong>table04</strong>'
}
/*
创建路由 并绑定定义的组件模板
*/
var myRouter = new VueRouter({
//routes是路由规则数组
routes:[
//每一个路由规则都是一个对象，对象中至少包含path和component两个属性
//path表示 路由匹配的hash地址，component表示路由规则对应要展示的组件对象
{path:"/tab1",component:tab1},
{path:"/tab2",component:tab2},
{path:"/tab3",component:tab3},
{path:"/tab4",component:tab4},
]
});
new Vue({
el:"#app",
// 在实例中挂载路由对象
router:myRouter
})
</script>
<style type="text/css">
#app {
500px;
height: 300px;
border: 1px solid black;
}
#app router-link {
100px;
padding: 10px;
}
.tablebody {
margin-top: 20px;
text-align: center;
background-color: aliceblue;
height: 240px;
}
</style>
</body>
</html>
注意:导入的vue-router_3.0.2.js 依赖于vue.js,且必须在创建路由之前导入
3.嵌套路由
在前面组件学习中，我们间接的了解到了父组件和子组件的概念，那么在一个路由实例中存在这另一个子路由，我们将他们称之为嵌套路由
<html>
<head>
<meta charset="utf-8">
<title>嵌套路由</title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<router-link to="/user">user</router-link>
<router-link to="/login">login</router-link>
<router-view></router-view>
</div>
<script type="text/javascript">
// 创建 user 模板
const User = {
template: `
<div>
this is user
</div>
`
};
// 定义login 父模板模板 login模板中写了定义了两个子路由
const Login = {
template: `
<div>
<h1>this is Login</h1>
<hr>
<router-link to="/login/pwd">账号密码登录</router-link>
<router-link to="/login/phone">扫码登录</router-link>
<router-view></router-view>
</div>
`
};
// 定义账号登录子路由组件
const account = {
template: `
<div>
账号：<input type="text"><br>
密码：<input type="text">
</div>
`
}
// 定义扫码子路由组件
const phone = {
template: `
<div>
<img src = "img/2.jpg" width = "50px">
</div>
`
}
// 创建路由对象
const myRouter = new VueRouter({
routes: [{
path: "/",
redirect: "/user"
},
{
path: "/user",
component: User
},
{
path: "/login",
component: Login,
// 定义子路由
children: [{
path: "/login/pwd",
component: account
},
{
path: "/login/phone",
component: phone
},
]
},
]
})
new Vue({
el: "#app",
// 挂载路由
router: myRouter
})
</script>
</body>
</html>
4.动态路由
<body>
<div id="app">
<!-- 定义四个 router-link 标签 -->
<router-link to="/user/1">点击1</router-link>
<router-link to="/user/2">点击2</router-link>
<router-link to="/user/3">点击3</router-link>
<router-link to="/user/4">点击4</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
template: "<div>用户:{{$route.params.id}}</div>"
}
// 创建路由对象
const myRouter = new VueRouter({
routes: [
// {path:"/",redirect:"/user"},
{
// 在路径上带一个id相当于带一个值达到动态路由的效果
path: "/user/:id",
component: User
}
]
});
new Vue({
el: "#app",
router: myRouter
})
</script>
</body>
上面的代码我们直接使用 $route.params.id 获取路由中传的参数值，除此之外，我们还可以通过props传值
<body>
<div id="app">
<!-- 定义四个 router-link 标签 -->
<router-link to="/user/1">点击1</router-link>
<router-link to="/user/2">点击2</router-link>
<router-link to="/user/3">点击3</router-link>
<router-link to="/user/4">点击4</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 上面的代码我们直接使用 $route.params.id 获取路由传的值，除此之外，我们还可以通过props传值
var User = {
props: ["id"],
// 使用props传值，在页面中使用{{}}就可以
template: "<div>用户：{{id}}</div>"
}
// 创建路由实例 制定路由规则
var myRouter = new VueRouter({
routes:[
// props:true 启用 props
{path:"/user/:id",component:User,props:true}
]
})
new Vue({
el: "#app",
data:{
id:1
},
//在app实例中挂载路由
router:myRouter
})
</script>
</body>
5.路由别名
<body>
<div id="app">
<!-- 在前台使用v-bind绑定 路由绑定使用别名name:'user' -->
<router-link :to="{ name:'user' , params: {id:111} }">111</router-link>
<router-link :to="{ name:'user' , params: {id:222} }">222</router-link>
<router-link :to="{ name:'user' , params: {id:333} }">333</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
props:["id"],
template:"<div>用户: {{id}}</div>"
}
var myRouter = new VueRouter({
routes:[
{
// name 为取的别名
path:"/user/:id",component:User,name:"user",props:true
}
]
});
new Vue({
el:"#app",
// 路由挂载
router:myRouter
})
</script>
</body>
6.编程式导航
页面导航的两种方式：
- 声明式导航：通过点击链接的方式实现的导航
- 编程式导航：调用js的api方法实现导航
this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });
this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );
dmeo演示
<body>
<div id="app">
<router-link :to="{ name:'user' , params: {id:1} }">user1</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue-router_3.0.2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var User = {
props:["id"],
template: `
<div>用户:{{id}}<br>
<span @click="test01">编程试导航测试1</span>
<span @click="test02">编程试导航测试2</span>
</div>
`,
methods:{
// 采用js编程式导航
test01:function(){
this.$router.push("/test01");
},
test02:function(){
this.$router.push("/test02");
}
}
}
//
var Test01 = {
template:`
<span>测试01</span>
`
}
var Test02 = {
template:`
<span>测试02</span>
`
}
// 创建路由 并制定规则
var myRouter = new VueRouter({
routes:[
{
path:"/user",component:User,name:'user',props:true
},
{
path:"/test01",component:Test01,name:'test01',props:true
},
{
path:"/test02",component:Test02,name:'test02',props:true
}
]
});
new Vue({
el:"#app",
router:myRouter
})
</script>
</body>
gitee地址：https://gitee.com/li_shang_shan/vue-routing-learning