使用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>