五、路由设置高级用法
alias 别名
{path:'/list',component:MyList,alias:'/lists'}
redirect 重定向
{path:'/productList',redirect:'/list'}
path:'*' 异常处理
{path:'*',component:'NotFound'}
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>重定向和别名</title> <script src="js/vue.js"></script> <!-- 引入文件 --> <script src="js/vue-router.js"></script> </head> <body> <div id="container"> <p>{{msg}}</p> <!--通过router-view指定盛放组件的容器 --> <router-view></router-view> </div> <script> var testLogin = Vue.component("login",{ template:` <div> <h1>这是我的登录页面</h1> </div> ` }) var testRegister = Vue.component("register",{ template:` <div> <h1>这是我的注册页面</h1> </div> ` }) var NotFound = Vue.component("not-found",{ template:` <div> <h1>404 Page Not Found</h1> <router-link to="/login">返回登录页</router-link> </div> ` }) //配置路由词典 const myRoutes =[ {path:'',component:testLogin}, {path:'/myLogin',component:testLogin}, {path:'/myRegister',component:testRegister}, //别名，在地址栏输入myRegister和login都会访问testRegister这个组件 {path:'/myRegister',component:testRegister,alias:"/login"}, //重定向,在地址栏中输入haha相当于输入myRegister---->testRegister {path:'/haha',redirect:'/myRegister'}, //异常处理,输入没有的会访问404页面 {path:"*",component:NotFound} ] const myRouter = new VueRouter({ //myRoutes可以直接用上面的数组替换 routes:myRoutes }) new Vue({ router:myRouter, el:"#container", data:{ msg:"Hello VueJs" } }) </script> </body> </html>