路由以及路由传参

最新推荐文章于 2022-09-22 10:08:42 发布

乐意-李

最新推荐文章于 2022-09-22 10:08:42 发布

阅读量732

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_45903009/article/details/115561852

版权

一：路由

1·1：传统的页面是如何进行页面的跳转的

标签的方式（声明式）a标签
js的方式（编程式）href，location， replace， go

1·2：什么是路由

路由就是根据url的不同来进行不同路由界面组件的切换，已达到页面之间显示切换的效果

通过路由完成SPA单页面的应用

1·3：路由的使用

方式一：通过脚手架的方式进行创建

方式二：手动创建

使用 npm install --save vue-router，引入路由功能模块
创建路由组件页面（views/pages文件夹）下创建
定义路由规则（router文件夹）下的index.js进行配置
1. 先引入要使用的路由页面到index.js
```
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
```

（1）就是要把你想使用的路由页面先进行引用

  import Home from '../views/home.vue'
  import About from '../views/about.vue'
  import Us from '../views/us.vue'
  import Movies from '../views/movies.vue'

配置路由规则

const routes = [
  {
    path: '/home',
    name: 'home',
    component: Home,
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  },
  {
    path: '/us',
    name: 'us',
    component: Us,
  },
  {
    path: '/movies',
 name: 'movies',
 component: Movies,
}
]

创建路由实例，并传入路由规则

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes 
})

把路由挂载到vue实例中，在main.js全局配置文件中下

    import Vue from 'vue'
   import App from './App.vue'
   // 与路由无关的小扩展
   // 在引包的时候如果你引用的是index.js 那么可以省略
   import router from './router'
   
   Vue.config.productionTip = false
   
   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app')

配置路由出口（在app.vue中设置一级路由出口）
```
 <router-view/>
```

二·路由导航

2·1：路由导航有两种

第一种：声明式

<router-link to=“/url”></router-link>

小扩展：

当对应的路由匹配成功，将自动设置 class 属性值 .router-link-active。
通过自动设置的类名方便进行路由导航样式设置

第二种：编程式

push：
```
fun(){
    this.$router.push("/url")
}
```
replace: 替换之后的页面是不能通过浏览器的回退按钮回去的
```
this.$router.replace("/user")
```
go
```
this.$router.go(正数/负数)
```

2.2：404页面

一般是项目必须的，防止用户错误的修改url，给用户一个错误的提示

【注意：一般写在路由配置的最后面】

 {
    path: '*',//路径  url中的路径
    name: 'no',//命名空间  给路由规则起个名字
    component: No // 匹配的组件
  },

2·3重定向

重新定位方向

  {
    path:"/",
    redirect:"/home"
  },

三：多级路由流程

创建路由页面【在views下创建一个文件夹】该文件夹下写二级路由页面
配置路由规则

在router/index.js 中引用二级路由页面

   import Vue from 'vue'
     import VueRouter from 'vue-router'
     //一级路由页面
     import Home from '../views/home.vue'
     import About from '../views/about.vue'
     import Us from '../views/us.vue'
     import Movies from '../views/movies.vue'
     //二级路由页面
     import Lista from '../views/navtwo/lista.vue'
     import Listb from '../views/navtwo/listb.vue'

配置路由规则确定是那个一级路由下的内容使用children配置

const routes = [
  {
    path: '/home',
  name: 'home',
    component: Home,
    //二级路由配置
    children:[
    {
        // 二级路由不加/
        path:'lista',
        name:'lista',
        component:Lista

    },
  {
      path:'listb',
    name:'listb',
      component:Listb

  }
  ]
  },
  {
    path: '/about',
    name: 'about',
    component: About,
  }
]

配置二级路由的出口使用 router-view 写在一级路由的template中

编写路由导航

<router-link to="/home/lista">二级菜单1</router-link>
<router-link to="/home/listb">二级菜单1</router-link>
<router-view/>

出口使用 router-view 写在一级路由的template中

编写路由导航

<router-link to="/home/lista">二级菜单1</router-link>
<router-link to="/home/listb">二级菜单1</router-link>
<router-view/>

四·扩展：定义路径别名

思考：为什么我们写一个@就是代表src呢？我们可以定义一些别的路径别名吗

解：在根路径的vue.config.js中加入:

configurewebpack:{
    resolve:{
        alias:{
            //"别名":“对应的文件夹”
            "com":"@/components"
        }
    }
}

五·mockjs 模拟数据

5·1：模拟数据存在的价值

在开发的时候，如果前台和后台同时开发第一时间会有真实的后台接口吗？

因为前台的开发速度快于后台我们就可以使用模拟数据来模拟请求和动态绑定

5·2：模拟数据的使用步骤

下载：npm install --save mockjs
src文件夹下创建一个mock文件夹
在mock中创建data文件夹来存放数据并且创建index.js来存放代码

index的写入的代码

let Mock=require("mockjs")

//创建电影的模拟请求
Mock.mock("/data/list/xiaoming/xiaohong",
          "get",
          require("./data/moviedata.json")
         )

切记：不要忘记注入模拟数据到全局

在main.js中写入mock

require("./mock")
//相当于寻找的是mock文件夹里的index.js

六：动态路由匹配（也叫路由传参）

6·1：什么是动态路由

动态路由也叫做路由传参

组件的显示内容经常会根据用户选择的内容不同来在同一个组件中渲染不同内容（类似于商品页跳转到详情页）

6·2：动态路由的方式

3·2·1：parama模式

1.在路由规则中绑定接收参数

给谁传参数就将参数绑定到谁的路径上

{
    path: '/all/:xm',//多个参数的话  可以继续往后拼接/:xm/:xh/:xl
    name: 'all',
    component: All
  },

2.开始发送

this.$router.push({name:"你要去的路由的名字",
   params:{你要传递数据的key:数据的val}
  })

fun(id){
     this.$router.push({name:"all",params:{xm:id}})
}

1. 开始接收
```
this.$route.params.xxxx
```

6·2·2：query模式

1,发送数据

this.$router.push({name:“你要去的路由的名字”,query:{你要传递数据的key:数据的val}})
```
 this.$router.push({name:"all",query:{xiaohong:id}})
```
2.接受数据
```
this.$route.query.xxxx
```

6·2·3：两者模式的区别：

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name。
url展示上：params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些

七：router和route的区别

$router是VueRouter的一个对象，router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。举例：history对象

$route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

八：路由模式

8·1：hsah模式

在url的显示上，有#
回车刷新以后可以加载到hash值对应的页面
支持低版本浏览器和IE浏览器

8·2：history模式

在url的显示上，没有#
回车刷新以后一般就是404掉页面
html5新推出的API

九：路由懒加载

乐意-李

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
路由以及路由传参

文章目录一：路由1·1：传统的页面是如何进行页面的跳转的1·2：什么是路由1·3：路由的使用方式一：通过脚手架的方式进行创建方式二：手动创建二·路由导航2·1：路由导航有两种第一种：声明式第二种：编程式2.2：404页面2·3重定向三：多级路由流程四·扩展：定义路径别名五·mockjs 模拟数据5·1：模拟数据存在的价值5·2：模拟数据的使用步骤六：动态路由匹配（也叫路由传参）6·1：什么是动态路由6·2：动态路由的方式3·2·1：parama模式6·2·2：query模式6·2·3：两者模式的区别：七：r
复制链接

扫一扫