《Vue3实战》第九章路由

女爷i 2023-09-25 23:47 61阅读 0赞

《Vue3实战》篇章整体栏目  
—————————————————————————————  
[【第一章】node.js/npm安装、配置][node.js_npm]  
[【第二章】创建项目和目录结构][Link 1]  
[【第三章】基础语法][Link 2]  
[【第四章】条件语句、循环语句][Link 3]  
[【第五章】计算、监听属性][Link 4]  
[【第六章】样式绑定和事件处理][Link 5]  
[【第七章】表单][Link 6]  
[【第八章】自定义指令][Link 7]  
[【第九章】路由][Link 8]  
[【第十章】Element plus指南][Element plus]  
【第十一章】Vue3实战之打造新闻系统前端模板  
—————————————————————————————

#### 目录 ####

*  1、安装路由
 *  2、router-link应用
 *   *  2.1、创建views/OrderList.vue组件
     *  2.2、配置路由
     *   *  1、新建router目录
         *  2、在router目录创建index.js文件
     *  2.3、修改main.js
     *  2.4、改造SentenceTest.vue
     *  2.5、<router-link\\>相关属性
     *   *  2.5.1、to
         *  2.5.2、replace
         *  2.5.3、append
         *  2.5.4、tag
         *  2.5.5、active-class
         *  2.5.6、exact-active-class
         *  2.5.6、event

—————————————————————————————

## 1、安装路由 ##

cnpm install vue-router@4

## 2、router-link应用 ##

### 2.1、创建views/OrderList.vue组件 ###

<template>   
        <h1>订单列表页面......</h1>
    </template>
    <script>
    export default{
        
        name: 'OrderList',
        data(){
        
            return{
        
                arr:[4,2,5]
            }              
        }
    }</script>

### 2.2、配置路由 ###

#### 1、新建router目录 ####

#### 2、在router目录创建index.js文件 ####

import {
         createRouter, createWebHashHistory } from 'vue-router'
    import OrderList from '../views/OrderList.vue'
    const routes = [
        {
        
            path: '/orderList',
            component: OrderList
        }
    ]
    
    const router = createRouter({
        
        history:createWebHashHistory(),
        routes
    })
    
    export default router;

### 2.3、修改main.js ###

import {
         createApp } from 'vue'
    import App from './App.vue'
    import router from './router/index
    const app = createApp(App);
    app.use(router);
    app.mount('#app');

### 2.4、改造SentenceTest.vue ###

<template>   
        <div>        
            <router-link to="/orderList">orderList</router-link>     
            <router-view></router-view>
        </div>   
    </template>
    <script>
        export default{
        
            name: 'SentenseTest',
            data(){
        
                return{
        
                    arr:[4,2,5]
                }              
            }
        }
    </script>

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
    <router-view> 将显示与 url 对应的组件。你可以把它放在任何地方，以适应你的布局。

### 2.5、<router-link>相关属性 ###

#### 2.5.1、to ####

表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<router-link to="home">Home</router-link>
    
    <a href="home">Home</a>
    
    
    <router-link v-bind:to="'home'">Home</router-link>
    
    
    <router-link :to="'home'">Home</router-link>
    
    
    <router-link :to="{ path: 'home' }">Home</router-link>
    
    
    <router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
    
    
    <router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

#### 2.5.2、replace ####

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

<router-link :to="{ path: '/abc'}" replace></router-link>

#### 2.5.3、append ####

设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

#### 2.5.4、tag ####

有时候想要 渲染成某种标签，例如

*  。 于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击，触发导航。
 *  #### 2.5.5、active-class ####
    
    设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。
    
        <style>
           ._active{
              
              background-color : red;
           }
        </style>
        <p>
           <router-link v-bind:to = "{ path: '/route1'}" active-class = "_active">Router Link 1</router-link>
           <router-link v-bind:to = "{ path: '/route2'}" tag = "span">Router Link 2</router-link>
        </p>
    
    #### 2.5.6、exact-active-class ####
    
    配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。
    
    #### 2.5.6、event ####
    
    声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。
    
        <router-link v-bind:to = "{ path: '/route1'}" event = "mouseover">Router Link 1</router-link>

[node.js_npm]: https://blog.csdn.net/s445320/article/details/130107403
[Link 1]: https://blog.csdn.net/s445320/article/details/130108162
[Link 2]: https://blog.csdn.net/s445320/article/details/130198834
[Link 3]: https://blog.csdn.net/s445320/article/details/130200350
[Link 4]: https://blog.csdn.net/s445320/article/details/130200783
[Link 5]: https://blog.csdn.net/s445320/article/details/130200903
[Link 6]: https://blog.csdn.net/s445320/article/details/130213404
[Link 7]: https://blog.csdn.net/s445320/article/details/130213662
[Link 8]: https://blog.csdn.net/s445320/article/details/130110029
[Element plus]: https://blog.csdn.net/s445320/article/details/130197081