Vue路由介绍

目录

一 点睛

二 安装路由模块

三 设计路由界面

四 创建静态路由表

五 引入路由模块并使用

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

七 路由分析

八 路由之间的参数传递

九 路由之间跳转的方式

---

一 点睛

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

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

二 安装路由模块

npm install vue-router -s

三 设计路由界面

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

Products.vue

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，发现中的内容发生改变。

http://localhost:8080/#/ 显示 home

http://localhost8080/#Products 显示Products

七 路由分析

八 路由之间的参数传递

1 设参

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

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

2 传参

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

    手机

3  接参

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

九 路由之间跳转的方式

1 通过导航式 HTML 中的路由 链接进行跳转。

首页

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

点我
btnfn(){
    this.$router.push("/home");
}