Vue 路由
在单页应用中常常要用到路由。
传统的页面跳转是浏览器请求新的页面，渲染整个新的页面。
单页应用是把要跳转的页面的以组件的形式集成在当前页面中，跳转时浏览器不用发起新请求，因为目标页面是当前页面的一部分，直接显示目标页面那一部分即可。
demo 在单页应用中使用路由
1、下载路由插件
npm install vue-router -s
install可以简写为i
我们要使用的是里面的vue-router.js文件
2、写一个test.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue.js -->
<script src="js/vue.js"></script>
<!-- 引入路由插件。上线时均要换为xxx.min.js -->
<script src="js/vue-router.js"></script>
</head>
<body>
<div id="app"></div>
<script>
// 首页组件
var index={
template:`
<div>
<p>this is the index page</p>
<p><a href="#/login">login</a></p> <!-- 注意url写法，#/开头 -->
<p><a href="#/register">register</a></p>
</div>
`
}
// 登录组件
var login={
template:`
<div>
<p>this is the login page</p>
<p><a href="#/index">index</a></p>
<p><a href="#/register">register</a></p>
</div>
`
}
// 注册组件
var register={
template:`
<div>
<p>this is the register page</p>
<p><a href="#/index">index</a></p>
<p><a href="#/register">register</a></p>
</div>
`
}
// 安装路由插件
vue.use(vuerouter);
// 创建路由对象
var router=new vuerouter({
// 配置路由规则
routes:[ //对象数组
{path:'/index',name:'index',component:index}, //path指定映射地址，注意没有#，component指定对应的组件
{path:'/login',name:'login',component:login},
{path:'/register',name:'register',component:register},
]
});
new vue({
el:'#app',
router, //原本是router:router,可以简写
template:`
<div>
<!--路由页面只是当前页面的一部分，当前页面可以写一些其他内容，写的内容是所有路由页面-->
<p>this is common area</p>
<router-view></router-view> <!--引入路由页面。路由到哪个页面，就用对应的组件替换这部分-->
</div>
`
})
</script>
</body>
</html>
3、运行
假设test.html的地址是：http://127.0.0.1:8848/vue/test.html#/ 注意后面有个#
则index的地址是：http://127.0.0.1:8848/vue/test.html#/index
login的地址是：http://127.0.0.1:8848/vue/test.html#/login
register的地址是：http://127.0.0.1:8848/vue/test.html#/register
3个页面，但实际上路由的3个页面都在test.html中。
单页应用的两种路由模式
- 哈希模式（利用
hashchange事件监听 url的hash 的改变）
- history模式（需要后台配合把接口都打到我们打包后的.html文件上，比如上用test.html打包路由页面，test.html相当于一个容器）
demo中使用的是哈希模式
哈希模式实现路由跳转的原理
// 监听地址栏url的改变，haschange是预定义事件
window.addeventlistener("hashchange",function(e){ //haschange事件发生时，会封装事件以参数的形式传给处理函数
console.log(e); //这个对象的部分信息： {..., oldurl: "http://127.0.0.1:8848/vue/test.html#/index", newurl: "http://127.0.0.1:8848/vue/test.html#/register", type: "hashchange", …}
console.log(location.hash); //地址栏的url已改变，获取新的url的hash。带有#/，比如#/index，#/login
// console.log(location); //location是不带#/的，比如index、login
switch(location.hash){ //根据路由配置决定和哪些常量比较。这些常量就是路由配置中的path
case '#/index':
//... //如果匹配就用对应的组件替换<router-view></router-view>部分
break;
case '#/login':
break;
case '#/register':
break;
}
})
路由跳转的3种方式
- <a>链接
- <router-link>标签
- $router对象
new vue({
el:'#app',
router,
template:`
<div>
<p>
<a href="#/index">index</a> <!-- 要带# -->
<router-link to="/login">login</router-link> <!-- 不带# -->
<button @click="goregister">register</button>
</p>
<router-view></router-view>
</div>
`,
methods:{
goregister(){
this.$router.push({path:'/register'}); //不带#
}
}
})
<router-link>、$router都是路由插件里的东西，都用路由了，那url中指定有#号，它自己会加#号，所以我们写路径的时候不加#号。
<a>是html的标签，不知道url中有没有#号，所以需要我们自己加上。
$router的常用方法
- push() 跳转到指定的页面，会往history中插入一条新纪录
- replace() 和push()的用法、作用相同，只是replace()不会往history中插入一条新纪录
- go(-1) 跳转到history中的上一条记录，相当于点击浏览器的后退箭头。
$router还有个兄弟$route，和$router不同，$route封装了路由信息，只有属性（可以理解为是只读的），常用的属性比如hash、path、query、params。
路由的传参和取参
1、<a>链接方式
// 首页组件
var index={
template:`
<div>
<p>this is the index page</p>
<p>{{this.$route.query.username}} {{this.$route.query.username}}</p> <!-- 如果只在载入此组件时使用，直接取就行了 -->
<p>{{username}} {{password}}</p> <!-- 如果后续还要使用，需要保存到内存变量中 -->
</div>
`,
data(){
return{
username:'',
password:''
}
},
created(){ //路由到此组件|页面时，会新建此组件的实例，在created()中获取传来的数据
this.username=this.$route.query.username; //$route,没有r，a链接只能用query来取
this.password=this.$route.query.password;
}
}
// 安装路由插件
vue.use(vuerouter);
// 创建路由对象
var router=new vuerouter({
// 配置路由规则
routes:[
{path:'/index',name:'index',component:index},
]
});
new vue({
el:'#app',
router,
template:`
<div>
<a href="#/index?username=chy&password=abcd">index</a> <!-- 传递参数 -->
<router-view></router-view>
</div>
`
})
参数以查询字符串的形式拼接在url中：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd
2、<router-link>方式有2种
（1）query
<!-- to前面有冒号,我这里使用的是路由配置里的name。query -->
<router-link :to="{name:'index',query:{username:'chy',password:'abcd'}}">index</router-link>
查询字符串的形式拼接参数，获取时也是$route.query的方式，url中会带有参数：http://127.0.0.1:8848/vue/test.html#/index?username=chy&password=abcd
（2）params
<!--params，post方式-->
<router-link :to="{name:'index',params:{username:'chy',password:'abcd'}}">index</router-link>
要用$route.params来接收，用什么传递就用什么接收。
url中不显示参数，更安全：http://127.0.0.1:8848/vue/test.html#/index
params方式的路由配置还可以这样写：
// 创建路由对象
var router=new vuerouter({
// 配置路由规则
routes:[
{path:'/index/:username',name:'index',component:index},
]
});
:参数名 可以获取对应的参数值，http://127.0.0.1:8848/vue/test.html#/index/chy，url是restful风格
3、$router对象方式
new vue({
el:'#app',
router,
template:`
<div>
<button @click="goindex">index</button>
<router-view></router-view>
</div>
`,
methods:{
goindex(){
this.$router.push({name:'index',query:{username:'chy',password:'abcd'}});
}
}
})
说明
<router-link>、$router对象方式，都可以使用query或params来传递参数，都可以使用path或name来指定路由页面，
如果路由配置的path是： {path:'/index/:username',name:'index',component:index} 这种随参数的变化而变化的，那就使用name。