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

时间：2023-11-09 17:30:26

路由：就是一个 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，但是难免会遇到 "新标签打开，用户体验会更好" 的情况。

相关文章