五、路由设置高级用法
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>
时间： 2024-07-31 03:22:02