vue 路由

您所在的位置：网站首页 › 规律的规能组成什么词 › vue 路由

vue 路由

2024-07-13 09:08:01| 来源: 网络整理| 查看: 265

路由---router 传统的项目怎么切换跳转页面?

1.新建很多的html文件

2.使用标签的方式进行跳转（a标签）或者使用js的方式进行跳转（window.location.href ）

传统的项目称之为多页面项目

路由基本概念

根据url的不同来渲染不同的组件页面

SPA -- 单页面应用在用户切换页面的时候没有那种传统页面的白屏问题提高了用户的体验

路由基本创建 vue-cl自动创建

在创建脚手架的时候选择自定义再选择Router 即可

在创建完项目之后会在src中多了两个文件夹

router ---》当前文件夹就是配置路由的文件夹

views ---》当前文件夹就是来写路由页面组件的

带有路由的空项目怎么办？

1.删除components里面的helloword.vue 与views里面的home.vue about.vue文件

2.views下新建你所需要的组件页面

3.需要配置路由规则去router下的index.js中配置

(3-1)引用你所想要的页面到index.js下 import from

(3-2) 在index.js的数组对象中进行规则的配置

// 引用vue import Vue from 'vue' // 引用vue的路由功能模块 import VueRouter from 'vue-router' // 引用你要配置的路由页面 // @ 只要在路径中出现无论是在那个层级只要写@就指向src import Home from "@/views/home.vue" import Jingxi from "@/views/jingxi.vue" import Phone from "@/views/phone.vue" import Shop from "@/views/shop.vue" import User from "@/views/user.vue" // 在vue中使用 vue路由 Vue.use(VueRouter) // 配置路由规则的地方 const routes = [ // 配置路由规则 { path: '/home', //url的路径 name: 'home',//给这个规则起个名字 component: Home //根据上后面的path路径所渲染的组件页面 }, { path: '/jingxi', //url的路径 name: 'jingxi',//给这个规则起个名字 component: Jingxi //根据上后面的path路径所渲染的组件页面 }, { path: '/phone', //url的路径 name: 'phone',//给这个规则起个名字 component: Phone //根据上后面的path路径所渲染的组件页面 }, { path: '/user', //url的路径 name: 'user',//给这个规则起个名字 component: User //根据上后面的path路径所渲染的组件页面 }, { path: '/shop', //url的路径 name: 'shop',//给这个规则起个名字 component: Shop //根据上后面的path路径所渲染的组件页面 }, ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

手动创建路由导航标签方式----声明式导航

使用 router-link这个标签来完成页面的跳转其中有个to属性就是你要去哪里的路径

首页惊喜手机购物我的

声明式导航选中样式类

每当我们选中那个声明式导航之后 vue会自动给这个导航添加一个router-link-active的类名那么我们就可以根据这个动态的类名添加样式

js的方式--- 编程式导航

1.跳转 this.$router.push("/去哪里的路径")

2.替换 this.$router.replace("/替换的路径")

fun(){ this.$router.push("/home") }

3.前进与后退 this.$router.go() 正数前进负数后退

404页面

就是当路径没有匹配页面的时候需要给用户一个错误页面的提示

// 404页面是一个错误提示页面我们必须把路由规则配置放在最后 { path: '*', name: 'Err', component: Err },

路由规则也是由优先级的配置越靠前优先级越高

重定向--redirect

重(重新)定(定位)向(方向路径)

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

在用户第一次进入的时候我们需要把用户的路径重新定位到首页

(为什么需要重定向,因为刚进去页面的url地址http://localhost:8080/,用户是不会手动的在地址栏中跳换页面的,所以需要重定向)

在路由规则中进行重定向的设置

const routes=[ { path:'/home', name:'Home', component:Home }, { path:'/shop', name:'Shop', component:Shop }, { path:'/user', name:'User', component:User }, //重定向 /默认路径 {path:"/",redirect:"/home"}, //404页面是一个错误提示页面我们必须把路由规则配置放在最后 { path:'*', name:'Err', component:Err } ]

路由出口

router-view 来设置路由出口就是根据路由的规则显示规则所匹配的路由组件页面显示的位置

多级路由/嵌套路由

在应用开发的过程中通常会出现在一个页面中嵌套另外一个局部页面进行局部跳转的时候

(可以理解为页面的局部跳转)

1.新建二级路由页面

2.在router下的index.js中先引用二级路由

3.配置二级路由的规则

(3-1)要配置规则先要确定规则写在哪二级路由的规则写在一级路由的规则内,使用children来标识

path可以是 /二级路由

import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/home.vue' import Shop from '../views/shop.vue' import User from '../views/user.vue' import Err from '../views/err.vue' // 二级路由 import Era from "@/views/er/era.vue" import Erc from "@/views/er/erc.vue" import Erd from "@/views/er/erd.vue" Vue.use(VueRouter) const routes = [ { path: '/home', name: 'Home', component: Home }, { path: '/shop', name: 'Shop', component: Shop }, { path: '/user', name: 'User', component: User, // 设置二级路由 children:[ { path: '/era', name: 'era', component:Era }, { path: '/erc', name: 'erc', component:Erc }, { path: '/erd', name: 'erd', component:Erd }, ] }, // 重定向 /默认路径 {path:"/",redirect:"/home"}, // 404页面是一个错误提示页面我们必须把路由规则配置放在最后 { path: '*', name: 'Err', component: Err } // { // path: '/about', // name: 'About', // // route level code-splitting // // this generates a separate chunk (about.[hash].js) for this route // // which is lazy-loaded when the route is visited. // component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') // } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router

path也可以是不带/

{ path: '/user', name: 'User', component: User, // 设置二级路由 // path不带/ children:[ { path: 'era', // path不带/ name: 'era', component:Era }, { path: 'erc', // path不带/ name: 'erc', component:Erc }, { path: 'erd', // path不带/ name: 'erd', component:Erd }, ] },

4.设置二级路由的路由出口在对应的一级路由页面中进行设置使用router-view

user

5.设置二级路由的导航

方式1 在设置二级路由规则的时候 path带/来设置的时候二级路由的路径是 /二级路由

era erc erd

方式2 在设置二级路由规则的时候 path不不不不不不不不不不不不不不带/来设置的时候

二级路由的路径是 /一级路由/二级路由

era erc erd 路由传参/动态路由匹配

在vue中需要把数据从一个页面传递到另外一个页面的时候

方式

params方式

1.在需要接收数据的路由规则中设置接收参数

{ path: '/shop/:xiaoming',//设置接收参数 name: 'Shop', component: Shop },

2.发送

声明式

home 点我把数据使用声明式方式传递到shop中

编程式

methods:{ fun(){ this.$router.push({name:'Shop',params:{xiaoming:'1111呵呵我是传递的额数据'}}) } }

3.接收

直接使用this.$route.params.xxxx

shop----{{this.$route.params.xiaoming}}

query方式

1.发送

语法:

点我声明式传参query 点我声明式传参query2222

2.接收

this.$route.query.xxxx

query和params的区别

语法上区别:

query方式传参分为两步发送数据的时候可以使用name还可以使用path来进行接收的时候使用this.$route.query.xxxxxx

params 传参需要三步并且在发送数据的时候只能是name 接收的时候使用this.$route.params.xxxx

url展示上 params在url上面只展示数据相对来说传参安全一点 queryurl 有key还有val 相对来说不安全

$router与$route区别

$router对象：是vue路由的对象他是路由实例他是一个路由全局对象包含了与路由相关的关键属性

$route对象 : 是跳转到指定路由的局部对象一个路由页面就有一个$route对象

路由模式

在vue中路由模式使用mode来进行指定

1.hash模式默认模式你不写就是默认模式

2.history模式

区别hashhistoryurl展示url带#url不带#浏览器兼容性兼容性好html5新特性所以对ie兼容性不好浏览器刷新刷新之后正常显示上线之后刷新页面丢失路由守卫

node项目

扩展---懒加载

路由懒加载路由页面按需加载

因为在传统的vue项目中,如果使用了路由可能会出现首页白屏问题也会造成很大的性能问题

1.import导入

component:()=>import("你要显示路由的页面路径")

2.异步组件

component:(resolve)=>require(['你要显示路由的页面路径即可'],resolve),

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

vue 路由

vue 路由

今日新闻

点击排行

推荐新闻

图片新闻

专题文章