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>
     
  • 相关阅读:
    Sql server
    分布式爬虫
    爬取某电影网站最新电影
    随笔写一个简单的爬虫
    python的os模块
    基于python的文件处理
    mysql习惯及主从复制参数设置
    git常用命令
    git实习笔记
    微信公众平台开发接口PHP SDK完整版
  • 原文地址:https://www.cnblogs.com/xshan/p/12363668.html
Copyright © 2011-2022 走看看