重定向:
在定义路由的时候,可以通过添加`redirect`参数,重定向到另外一个页面。
routes: [{
path: "/",
redirect: "/article"
}]
别名:
在定义路由的时候,可以通过添加`alias`参数,表示该url的别名,以后也可以通过这个别名来访问到这个组件。
let router = new VueRouter({
routes: [ {
path: "/article",
component: article,
alias: "/list"
}]
})
整体代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <title>VueRouter-路由重定向和别名</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script> let article = Vue.extend({ template: "<h1>文章列表</h1>" }) let router = new VueRouter({ routes: [{ path: "/", redirect: "/article" }, { path: "/article", component: article, alias: "/list" }] }) new Vue({ el: "#app", router, }) </script> </body> </html>