Vue路由介绍

女爷i 2021-07-24 18:56 410阅读 0赞

**目录**

一 点睛

二 安装路由模块

三 设计路由界面

四 创建静态路由表

五 引入路由模块并使用

六 创建路由链接和路由视图

七 路由分析

八 路由之间的参数传递

九 路由之间跳转的方式

--------------------

# 一 点睛 #

vue中的路由，能够帮助我们在一个 Vue 组件中实现其他组件的相互切换。

可以通过路由模块，再创建路由表，将指定的组件显示在路由视图中，最后实现路由跳转。

# 二 安装路由模块 #

npm install vue-router -s

# 三 设计路由界面 #

创建Views文件夹，文件夹内分别创建Products、Home组件

Products.vue

<template>
        <div>Products</div>
    </template>

Home.vue

# 四 创建静态路由表 #

在src下创建routes.js

import Home from './views/Home.vue'
    import Products from './views/Products'
    export const routes = [
        {path:'/',component:Home},
        {path:'/Products',component:Products}
    ]

# 五 引入路由模块并使用 #

在 main.js使用路由模块

import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from 'vue-router' // 1 引入路由模块
    import {routes} from './routes' // 2 引入静态路由表
    
    Vue.use(VueRouter); // 3 使用路由模块
    
    // 4 创建一个 VueRouter 模块的实例
    const router = new VueRouter({
        routes:routes
    });
    
    new Vue({
        el:'#app',
        router:router // 5 把 router 实例放入到 vue 实例中
        render: h => h(App)
    })

# 六 创建路由链接和路由视图 #

App.vue

改变url，发现<router-view></router-view>中的内容发生改变。

[http://localhost:8080/\#/][http_localhost_8080] 显示 home

[http://localhost8080/\#][http_localhost8080]Products 显示Products

# 七 路由分析 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 八 路由之间的参数传递 #

1 设参

通过路由表，设置路由参数

{
        path:'/products/:mid',
        component:Products
    }

2 传参

通过 router-link 的 to 访问路径时携带参数

3  接参

在目标 vue 中，通过 vue 中的$route.params.mid来接收参数

<template>
        <div>
            {
       {id}}
            家电
        </div>
    </template>
    <script>
        export default{
            name:"products.vue"
            data(){
                return{
                    id:this.$route.params.id
                }
            }
        }
    </script>

# 九 路由之间跳转的方式 #

1 通过导航式 HTML 中的路由<router-link to="路由地址"> 链接进行跳转。

<router-link to="/Home">首页</router-link>

2 通过编程式 js 实现路由的跳转

<button type="button" @click="btnfn">点我</button>
    btnfn(){
        this.$router.push("/home");
    }

[http_localhost_8080]: http://localhost:8080/#/
[http_localhost8080]: http://localhost8080/#user
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/4936334fdce44eb6a286a65a78918e4d.png