@[TOC]Vue 中路由 Router 的使用
什么是路由
- 后端路由: 对于普通的网站,所有的超链接都是 URL 地址,所有的 URL 地址都对应服务器上对应的资源;
- 前端路由:对于单页面应用程序来说,主要通过 URL 中的 hash(#号)来实现不同页面之间的切换,同时,hash 有一个特点:HTTP 请求中不会包含 hash 相关内容;所以,单页面应用程序中的页面跳转主要用 hash 实现;
- 在单页面应用程序中,这种通过 hash 改变来切换页面方式,称作前端路由(区别于后端路由)。
在 Vue 中使用 Router
- 引用 vue-router.js 这个包(可在网上直接下载 vue-router包);
- 创建一个路由对象,当导入 vue-router 包之后,在 window 全局对象中,就有一个路由的构造函数 VueRouter(可以直接 new 创建);
- 使用 VueRouter 实例下的 routes 属性指定路由匹配规则(这时候要创建组件);
每个路由规则,都是一个对象,这个规则对象身上有两个必须的属性:
属性1:path 表示监听哪个路由链接地址;
属性2:component 表示如果路由是前面匹配到的 path,则展示 component 属性对应的组件;
注意:component 的属性值必须是一个组件模板对象,不能是组件的引用名称。
- 将路由规则对象,注册到 Vue 实例,用来监听 URL 变化,然后展示对应的组件;
- 要想在页面显示组件,在 html 中还要写上 vue-router 提供的 router-view 元素,这是专门用来当做占位符的,将来路由规则匹配到的组件,就会展示到 router-view 中(可认为是个占位符)。
代码示例:路由 router 的基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src='vue.js'></script>
<!--1. 安装 vue-router 路由模块(注意顺序)-->
<script src="vue-router.js"></script>
<style>
body{
font-size:36px;
color:#fff;
}
.router-link-active,.myactive{
/*高亮显示*/
color:red;
font-weight:800;
font-size:50px;
}
.v-enter,.v-leave-to{
/*为路由添加动画*/
opacity:0;
transform:translateX(100px)
}
.v-enter-active,.v-leave-active{
transition:all .6s;
}
</style>
</head>
<body>
<div id="app">
<!-- router-link 默认渲染为一个 a 标签,可通过 tag 属性更改渲染的标签 -->
<!-- <router-link to='/login?id=1' tag='span'>login</router-link> -->
<router-link to='/login' tag='span'>login</router-link>
<router-link to='/register' tag='span'>register</router-link>
<router-view></router-view><!-- 5.占位符、容器 -->
</div>
</body>
</html>
<script>
//3.创建组件模板对象
//可以在任何组件内通过 this.$router 访问路由器,也可以通过 this.$route 访问当前路由
var login = {
template:'<h1>login component</h1>',
}
}
var regist