zoukankan      html  css  js  c++  java
  • VueRouter-路由重定向和别名

      重定向:

      在定义路由的时候,可以通过添加`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>
     
  • 相关阅读:
    java集合部分原材料
    java--Collection继承结构图
    java--类与类之间的关系
    java--BigDecimal类
    java--生成随机数
    java--枚举类型
    java--数字格式化
    Java--包装类型
    Java--StringBuffer和StringBuilder
    Java--String
  • 原文地址:https://www.cnblogs.com/xshan/p/12363668.html
Copyright © 2011-2022 走看看