Vue 中的路由（VueRouter）

Vue 筆記目錄

路由：根據請求的路徑按照一定的路由規則進行請求的轉發從而實現統一請求的管理；

路由的作用：用來在 Vue 中實現 組件之間的動態切換；

在項目中使用路由：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>

路由的基本使用

創建組件對象；
定義路由對象的規則；
將路由對象註冊到 vue 實例；
在頁面中顯示路由的組件；
根據鏈接切換路由；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>路由的基本使用</title>
</head>
<body>
<div id="app">
    <!--4、在頁面中顯示路由的組件-->
    <router-view></router-view>
    <!--5、根據鏈接切換路由組件-->
    <a href="#/login">點我登錄</a>
    <a href="#/register">點我註冊</a>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>

    // 1、創建組件對象
    const login = {
        template: "<h1>登錄</h1>"
    };
    const register = {
        template: "<h1>註冊</h1>"
    };

    // 2、創建路由對象
    const router = new VueRouter({
        routes: [ // 定義路由對象的規則
            // path:設置路由的路徑, component:路徑對應的組件
            {path: "/login", component: login},
            {path: "/register", component: register}
        ]
    });
    
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router: router // 3、在vue實例中註冊路由對象
    });
</script>

router-link 使用

作用：在切換路由時可以自動給路由路徑加入#不需要手動加入。

使用 a標籤 切換路由：需要在路徑前面加 #；

<a href="#/login">點我登錄</a>
<a href="#/register">點我註冊</a>

使用 router-link 切換路由：

to屬性書寫路由路徑；tag屬性將 router-link 渲染成指定的標籤；

<router-link to="/login" tag="a">我要登錄</router-link>
<router-link to="/register" tag="button">點我註冊</router-link>

默認路由

作用：用來在第一次進入界面是顯示一個默認的組件；

const router = new VueRouter({
    routes: [
        // {path: "/", component: login},
        {path: "/", redirect:"/login"}, // redirect:當訪問的是默認路由"/"時, 跳轉到指定的路由展示[推薦]
        {path: "/login", component: login},
        {path: "/register", component: register}
    ]
});

路由中參數的傳遞

傳統方式傳遞參數

URL 中通過 ? 拼接參數：

<router-link to="/login?username=zhenyu&password=12345" tag="a">我要登陸</router-link>

在組件中獲取參數：通過 this.$route.query.xxx 來獲取參數；

const login = {
    template: "<h1>用戶登錄</h1>",
    data() {return{}},
    methods: {},
    created() {
        console.log("name=" + this.$route.query.name + ", pwd=" + this.$route.query.pwd)
    }
};

restful 方式傳遞參數

通過使用路徑方式傳遞參數：

const router = new VueRouter({
    routes: [
        {path: "/register/:name/:pwd", component: register}
    ]
});

<router-link to="/register/zhenyu/12345" tag="a">我要註冊</router-link>

在組件中獲取參數：通過 this.$route.params.xxx 來獲取參數；

const register = {
    template: "<h1>用戶註冊</h1>",
    data() {return{}},
    methods: {},
    created() {
        console.log("name=" + this.$route.params.name + ", pwd=" + this.$route.params.pwd);
    }
};

完整示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>路由中傳遞參數</title>
</head>

<body>
<div id="app">
    <router-view></router-view>
    <router-link to="/login?name=zhenyu&pwd=12345" tag="a">我要登陸</router-link>
    <router-link to="/register/zhenyu/12345" tag="a">我要註冊</router-link>
</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
    const login = {
        template: "<h1>用戶登錄 {{this.$route.query.name}}</h1>",
        data() {return{}},
        methods: {},
        created() {
            console.log("name=" + this.$route.query.name + ", pwd=" + this.$route.query.pwd);
        }
    };
    const register = {
        template: "<h1>用戶註冊 {{this.$route.params.name}} </h1>",
        data() {return{}},
        methods: {},
        created() {
            console.log("name=" + this.$route.params.name + ", pwd=" + this.$route.params.pwd);
        }
    };
    const router = new VueRouter({
        routes: [
            {path: "/", redirect: "/login"},
            {path: "/login", component: login},
            {path: "/register/:name/:pwd", component: register}
        ]
    });
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router // 註冊路由
    });
</script>

嵌套路由

聲明最外層和內層組件對象；
創建含有路由對象的路由對象(嵌套路由)，通過 chidren 嵌套；
註冊與使用路由；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>路由中傳遞參數</title>
</head>

<body>
<div id="app">
    <router-link to="/product">商品管理</router-link>
    <router-view></router-view>
</div>
<template id="product">
    <div>
        <h1>商品管理</h1>
        <router-link to="/product/add">商品添加</router-link>
        <router-link to="/product/edit">商品編輯</router-link>
        <router-view></router-view>
    </div>
</template>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router.js"></script>
<script>
    // 聲明最外層和內層組件對象
    const product = {
        template: '#product'
    };
    const add = {
        template: "<h4>商品添加</h4>"
    };
    const edit = {
        template: "<h4>商品編輯</h4>"
    };
    // 創建含有路由對象的路由對象(嵌套路由), 通過children嵌套
    const router = new VueRouter({
        routes: [
            {
                path: "/product",
                component: product,
                children: [
                    {path: "add", component: add},
                    {path: "edit", component: edit},
                ]
            },
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {},
        methods: {},
        router // 註冊路由
    });
</script>

路由結合 SpringBoot 案例

後臺控制器

這是一個簡單的演示性的小項目，後臺控制器返回一串 Json 字符串。

@RestController
@RequestMapping("user")
@CrossOrigin
public class UserController {
    @GetMapping("findAll")
    public List<User> findAll() {
        List<User> list = Arrays.asList(
                new User("21", "zhenyu", 21, new Date()),
                new User("22", "小三", 24, new Date()),
                new User("23", "小明", 25, new Date())
        );
        return list;
    }
}

前端頁面

前端頁面通過 Axios 獲取後端傳遞的 Json 字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用vue開發簡單頁面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>

<div id="app">
    <div class="container">
        <div class="row" style="margin-top: 70px;">
            <div class="col-md-10 col-md-offset-1">
                <ul class="nav nav-pills nav-justified">
                    <li role="presentation" :class="showAtice=='home'?'active':''"><a href="#/home" @click="changActive('home')">主頁</a></li>
                    <li role="presentation" :class="showAtice=='user'?'active':''"><a href="#/user" @click="changActive('user')" >用戶管理</a></li>
                    <li role="presentation" :class="showAtice=='student'?'active':''"><a href="#/student" @click="changActive('student')">學生管理</a></li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <!--顯示路由組件內容-->
                <router-view></router-view>
            </div>
        </div>
    </div>
</div>

<template id="home">
    <div>
        <div class="jumbotron" style="margin-top: 100px;">
            <h1>Hello, world!</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
        </div>
    </div>
</template>

<template id="user">
    <div>
        <table class="table table-strip" style="margin-top: 100px;">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>生日</th>
                <th>操作</th>
            </tr>
            <tr v-for="user in users">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>{{user.bir}}</td>
                <td><a href="" class="btn btn-default">修改</a>
                    <a href="" class="btn btn-danger">刪除</a>
                </td>
            </tr>

        </table>
    </div>
</template>

<template id="student">
    <div>
        <table class="table table-strip" style="margin-top: 100px;">
            <tr>
                <th>id</th>
                <th>學生姓名</th>
                <th>學歷</th>
                <th>郵箱</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>張三</td>
                <td>23</td>
                <td>2012-12-12</td>
                <td><a href="" class="btn btn-default">修改</a>
                    <a href="" class="btn btn-danger">刪除</a>
                </td>
            </tr>
        </table>
    </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    // 1. 主頁組件配置對象
    const home = {
        template : "#home",
    }
    // 2.用戶管理組件配置對象
    const user = {
        template: "#user",
        data(){
            return {
                users:[],
            }
        },
        methods: {},
        created() {
            //發送查詢所有用戶信息
            _this = this;
            axios.get("http://localhost:8080/user/findAll").then((res)=>{
                console.log(res.data);
                _this.users = res.data;
            });
        }
    }
    // 3.學生管理組件的配置對象
    const student = {
        template: "#student",
    }

    // 路由對象
    const router = new VueRouter({
        routes: [
            {path: '/', redirect: '/home'},
            {path: '/home', component: home},
            {path: '/user', component: user},
            {path: '/student', component: student},
        ]
    });

    const app = new Vue({
        el: "#app",
        data: {
            showAtice: 'home',
        },
        methods: {
            changActive(value) {
                console.log(value);
                this.showAtice = value;
                console.log(this.showAtice);
            }
        },
        router: router // 註冊路由
    });
</script>
</body>
</html>

Vue 學習筆記（3）Vue 中的路由

Vue 中的路由（VueRouter）

路由的基本使用

router-link 使用

默認路由

路由中參數的傳遞

傳統方式傳遞參數

restful 方式傳遞參數

完整示例

嵌套路由

路由結合 SpringBoot 案例

後臺控制器

前端頁面

[轉帖]使用NMT和pmap解決JVM資源泄漏問題原創

Python實現大麥網搶票的四大關鍵技術點解析

Python 安裝庫指令大全

salesforce零基礎學習（一百三十八）零碎知識點小總結（十）

一款開源的.NET程序集反編譯、編輯和調試神器

關於接口協議，你必須要知道這些！

【2024-05-21】以茶會友

Shiro 權限管理入門之認證與授權

SpringBoot整合Redis 之 StringRedisTemplate、RedisTemplate 基礎

Redis 筆記之 Java 操作 Redis（Jedis）

Redis 中兩種持久化機制詳解

Redis入門之Redis安裝、配置及常用指令

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結