<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueRouter</title>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<template id="users">
<div>
<div>I am the users page !</div>
<hr>
<router-link to='/users/login'>Login</router-link>
<router-link to="/users/regist">Regist</router-link>
<router-view>Login and Regist areas !</router-view>
</div>
</template>
<template id="detail">
<div>
<div>I am the detail page !</div>
{{$route.params}}
<br>
{{$route.path}}
<br>
{{$route.query}}
</div>
</template>
<template id="news">
<div>
<div>I am the news page !</div>
<hr>
<router-link to="/news/detail/001">News 001</router-link>
<router-link to="/news/detail/002">News 002</router-link>
<router-view></router-view>
</div>
</template>
<template id="home">
<div>
<div>I am the main page !</div>
<br>
<input type="button" value="ToUserPage" @click="push">
<input type="button" value="ToDetailPage" @click="replace">
</div>
</template>
<script type="text/javascript">
window.onload=function(){
/*Definite component for routers*/
const home={
template:'#home',
methods:{
push(){
router.push({path:'/users'});
},
replace(){
router.replace({path:'/news/detail/005'})
}
}
};
const news={
template:'#news'
};
const users={
template:'#users'
};
const login={
template:'<div>I am the login page !</div>'
};
const regist={
template:'<div>I am the regist page !</div>'
};
const detail={
template:'#detail'
};
//Definite router
/*位置一：写在这里是就对了，也就是：
*写在const router=new VueRouter({routes});路由定义的上面，就位置而言哈，别想多了，哈哈，，
*/
const routes=[{path:'/home',component:home},
{
path:'/news',
component:news,
children:[
{path:'detail/:aid',component:detail}]
},
{
path:'/users',
component:users,
children:[
{path:'login',component:login},
{path:'regist',component:regist}]
},
{path:'/',redirect:'/home'}//default contents of show
];
const router=new VueRouter({routes});
new Vue({
el:'#app',
/*'router':router*/
router //registe router
});
/*位置二：写在这里是就玩不下去了，也就是：
*写在const router=new VueRouter({routes});路由定义的下面，我的这个小心脏啊，上看下看，左看右看，就是看不出是哪里错了，心里这个憋屈啊，至于是个什么原理我就不懂了，初学者啊，以后再回来探个究竟吧，
*/
/*const routes=[{path:'/home',component:home},
{
path:'/news',
component:news,
children:[
{path:'detail/:aid',component:detail}]
},
{
path:'/users',
component:users,
children:[
{path:'login',component:login},
{path:'regist',component:regist}]
},
{path:'/',redirect:'/home'}//default contents of show
];*/
}
</script>
</head>
<body>
<div id="app">
<!--Use router-->
<router-link to="/home">HOME</router-link>
<router-link to="/news">NEWS</router-link>
<router-link to="/users">USERS</router-link>
<router-view>This is contents</router-view>
</div>
</body>
</html>
再顺便总结下Vue中路由的几个关键点吧：
1：需要引入<script type="text/javascript" src="js/vue-router.js"></script>，都组件化开发了，Vue中是没有vue-router的，已经把它拎出来了，
2：需要指明路由存放的位置<router-view>This is contents</router-view>
3：路由的定义：const router=new VueRouter({routes});当把routes（const routes=[]）拎出去写的时候要把它写在定义语句的前面
4: 路由中用到的一些方法：$route.params()/$route.path()/$route.query()/router.push({pach:'路径'})/router.replace({pach:'路径'})/router.go(1/-1):跳转到前一页/后一页