使用VueRouter的前提：
1， 必须导入vue-router.js文件
2， 要有VueRouter()实例
3， 要把VueRouter实例挂载到Vue实例中
4， 路由的入口
<router-link to='/index'>index页面</router-link>
5， 路由的出口
<router-view></router-view>
第一个VueRouter实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<!--路由的入口-->
<!--里面必有这个to="路径" 属性-->
<router-link to="/index">index页面</router-link>
<router-link to="/home">home页面</router-link>
<hr>
<!--路由的出口-->
<router-view></router-view>
</div>
</body>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
//写路由
const routes = [
{
path:"/index",
component:{
template:`<div>
<h1>这是index页面</h1>
</div>`,
},
},
// 每一个路由都是一个对象，属性是path:对应的是路径
// component：里面是template 里的内容将会挂载到页面上。
{
path:"/home",
component:{
template:`<div>
<h1>这里是home页面</h1>
</div>`,
}
}
];
// 生成VueRouter示例
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj // 将路由实例挂载到Vue实例中
})
</script>
</html>
路由的模糊匹配：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<router-link to="/user/清秋?age=17">清秋页面</router-link>
<router-link to="/user/小白?age=17">小白页面</router-link>
<!-- ？后跟的会存到一个query中，后面只需要从query中调取就可以了-->
<hr>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
const routes = [
{
path:"/user/:name",
// :后跟的就是模糊查询的，类似于正则
component:{
template:`<div>
<h1>这里是{{$route.params.name}}的主页页面！</h1>
<p>他{{$route.query.age}}岁</p>
</div>`,
}
},
];
//生成VueRouter实例
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj //将路由实例挂载到Vue实例中
})
</script>
</body>
</html>
子路由：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<router-link to="/index/qingqiu">清秋的主页</router-link>
<hr>
<router-view></router-view>
</div>
<script src="vue.js"></script>
<script src="VueRouter.js"></script>
<script>
const routes = [
{
path:"/index/:name",
component:{
template:`<div>
<h1>这里是{{$route.params.name}}的主页</h1>
<hr>
<router-link to="info" append>他喜欢的music</router-link>
<hr>
<router-view></router-view>
</div>`,
// 在父路由里写上子路由的的链接 标签属性里加上append:可以在原有路径的后面追加路径信息
},
children:[
{
path:"info",
component:{
template:`<div>
<h1>忘记时间</h1>
<p>沉默着，走了有，多遥远</p>
</div>`,
}
}
],
},
];
const router_obj = new VueRouter({
routes:routes
});
var app = new Vue({
el:"#d1",
data:{},
router:router_obj,
})
</script>
</body>
</html>