vue路由高级用法

最新推荐文章于 2025-03-13 09:30:02 发布

dede3535

最新推荐文章于 2025-03-13 09:30:02 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangruifang/p/7776698.html

本文介绍Vue.js中Vue Router的高级配置技巧，包括别名(alias)、重定向(redirect)及异常处理(path:'*')的应用。通过示例展示了如何设置路由别名实现多个路径访问同一组件，如何使用重定向将一个路径映射到另一个路径，以及如何处理未定义路径的异常情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

五、路由设置高级用法
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>