vue_VueRouter 路由_路由器管理n个路由_并向路由组件传递数据_新标签路由_编程式路由导航

路由:就是一个 key 与 value 的映射关系。key 就是 pathh

前台路由的 value 是 Component 组件对象

后台路由的 value 是一个 回调函数

普通链接: 会发送请求,与后台交互

路由链接: 不会发送请求,纯前台处理

request

body ---- post 请求体数据

params ---- /detail/:id 请求参数        冒号 用于占位,字符串 为参数名

query ---- /detail/5?name=Tom 请求字符串

vue-router

npm install vue-router --save

src/router -------- 1. 定义路由器对象模块

import Vue from "vue"

import VueRouter from "vue-router"

import Home from "./pages/Home"

import About from "./pages/About"

Vue.use(VueRouter);

export default new VueRouter({

mode: "history",        // 路由链接不带 #

routes:[

{

path: "/home",

component: Home

},

{

path: "/about",

component: About

}

]

})

src/main.js -------- 入口文件,2. 配置 路由器

import router from "./router"

new Vue({

router        // 配置路由器

})

src/App.vue -------- 3. 使用路由

// 路由链接

<router-link to="/about">About</router-link>

<router-link to="/home">Home</router-link>

 

// 渲染当前路由对应的组件 - 将会给所有相关路由页面 传递 msg

<router-view msg="123abc"></router-view>

// 实现: 缓存路由组件对象,页面的前进、后退,会保存之前用户输入数据

//<keepalive>

//<router-view msg="123abc"></router-view>

//</keepalive>    // 比如股票这种实时性要求高的需求,不能使用 <keepalive>

  • 路由组件传递数据 还可以使用 params 和 query
  • 编程式路由导航

this.$router.back() / this.$router.go(-1)

this.$router.go(1)

this.$router.push(path)

this.$router.replace(path)

  • 使用 $router.resolve 这种方法能够实现新窗口打开路由,示例代码如下:

参考: https://www.cnblogs.com/zhangruiqi/p/9266704.html

  • // this.$router.push("/searchGoods");
    let routeData = this.$router.resolve({
    name: "searchGoods",
    query: params,
    params:{catId:params.catId}
    });
    window.open(routeData.href, '_blank');

虽然是单页面应用 SPA,但是难免会遇到 "新标签打开,用户体验会更好" 的情况。

上一篇:Android简易实战教程--第三十话《撕衣美女》


下一篇:vue + element-ui Table的数据多选,多页选择数据回显,分页记录保存选中的数据。