Vue 路由--基础

青田。

已于 2022-07-04 23:32:35 修改

阅读量3.4k

点赞数 6

分类专栏： vue 文章标签： vue.js 前端

于 2022-07-01 22:38:03 首次发布

本文链接：https://blog.csdn.net/Tianxiaoxixi/article/details/125565725

版权

vue 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

官网：https://cn.vuejs.org/v2/guide/routing.html

一、解释

路由就是可以为我们完成页面之间的跳转让我们完成单页面多视图的应用(SPA)

二、创建路由

① vue-cli自动创建(在创建vue脚手架项目的时候我们一定要选中router项 )

② 指令创建

npm install vue-router

那么项目创建好后会发现项目src文件夹下多了两个文件夹

views ------>页面文件夹

router ----->就是用来配置路由的

三、创建一级路由

1.在views下创建对应页面

2.配置路由页面规则在router文件夹下的index.js中进行配置

import Vue from 'vue'
import VueRouter from 'vue-router'
// 第一步 引用路由页面到路由规则配置文件中
import myHomefrom '../views/myHome.vue'
import myShopping from '../views/myShopping.vue'
import myList from '../views/myList.vue'
import myNews from '../views/myNews.vue'
import myShare from '../views/myShare.vue'

//在vue中使用路由功能
Vue.use(VueRouter)

const routes = [
  {
    path: '/', //url路径
    name: 'myHome', //给当前的规则起名字
    component: myHome//匹配的路由页面
  },
  {
    path: '/myShopping',
    name: 'myShopping', 
    component: myShopping 
  },
  {
    path: '/myList', 
    name: 'myList', 
    component: myList 
  },
  {
    path: '/myNews', 
    name: 'myNews', 
    component: myNews 
  },
  {
    path: '/myShare', 
    name: 'myShare', 
    component: myShare 
  }
]

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

export default router

3.设置路由出口在app.vue中使用router-view来进行标识

以上操作后基本配置就完成了！！！！！！！！！

四、路由导航

4-1、声明式 (标签的方式跳转)

router-link 来进行页面的切换其中to属性来设置跳转地址

<router-link to="跳转地址"> </router-link>

练习：

写了一个全局组件tabbar.vue

组件中写了标签跳转

五个页面分别引入全局组件

会发现这个router-link标签会解析成a标签 大概修改下样式

以上基本就实现路由的跳转了！！！！！！！！

需求：点那个，那个高亮

选中的样式类

.router-link-active{

background: red;

}

但是出问题了默认首页也会出现背景色

解释：在vue路由导航中会默认给我们选中的当前导航添加样式类 router-link-active

如果在配置路由的时候路由规则的path中只有一个单独的/ 那么无论选没有选中当前的这个路由都会添加上述的类名为了解决所以我们在配置路由的时候 path中不能设置单独的/ ，但是如果我们吧路由规则的path在设置的时候没有设置单独的/ 那么第一次进入页面的时候就没有默认路由规则也就没有默认的首页解决方式使用重定向 ( redirect )

重定向：重新定位方向可以在第一次进入页面的时候帮助用户自动把页面进行指定位置的切换

// 建议写在路由最后

{

path: '/myHome', //url路径

name: 'myHome', //给当前的规则起名字

component: myHome //匹配的路由页面

},

{
path:"/",
// 重新定位方向
redirect:"/myHome"
}

解决方法：第一个/ 后加myHome再重定向，再修改页面的/myHome

· 404页面

当url中出现了我们没有配置过的路由页面就会出现白屏，我们需要给用户在url中没有我们配置过路由的情况下做出一个页面没有找到的提示则用404提示一下。

在views文件夹下新建一个myNo.vue 页面，再配置路由

// 写在所以路由的最最最最后面

{

path: '*',

name: 'myNo',

component: myNo

}

4-2、编程式 (js的方式跳转) 三个方法

this.$router.push("/去哪里")

this.$router.push(字符串/对象)

404页面编程式跳转首页

this.$router.replace("/去哪里")

//替换一个路由（不记录到历史记录)

场景：比如付款页面，付款完跳转到付款成功页面不允许用户再回退回来

this.$router.go( ) 正数是前进负数是回退

this.$router.go(-1|1)|back()|forward() //回退/前进

五、二级路由/三级路由/多级路由

解释：在一个路由中嵌套另外一个路由那么就是多级路由

多级路由创建方式和一级路由过程一样只是在配置路由规则的时候有所不同

使用children关键字来进行配置

第一步：在views下新建二级路由页面

第二步：配置路由规则

① 在router下的index.js中先引用二级路由页面

② 确定是哪个一级路由的子路由然后就在对应的一级路由中添加children配置二级路由（这里例子配置myNews页面了）

③ 配置二级路由的出口router-view (路由出口写在对应一级路由的页面中 )

因为这4个二级路由只在myNews.vue页面显示，所以用了局部组件，其他页面不显示

④ 设置路由导航

（4-1）如果多级路由在配置规则的时候 path带 / path:"/xxx" 那么路由导航就to属性就是 /xxx

{

path: '/twoRoutingOne', // path带/

name: 'twoRoutingOne',

component: twoRoutingOne

},

// 路由导航里
<router-link to="/twoRoutingOne">电影</router-link>

（4-2）如果多级路由在配置规则的时候 path不带 / path:"xxx" 那么路由导航就to属性就是 /一级路由/二级路由

{
path: 'twoRoutingOne', //path不带/
name: 'twoRoutingOne',
component: twoRoutingOne
},

// 路由导航里
<router-link to="/myNews/twoRoutingOne">电影</router-link>

二级路由简单效果展示

六、路由模式

在vue设置路由的时候有两种模式 hash history

使用mode来进行设置

// src/router/index.js

let router = new VueRouter({ //插件路由对象
   routes,
   // mode:'hash'//哈希模式   location.href
   mode:'history'//历史记录   history.pushState
});

区别	hash(默认值)	history模式
url展示上	url 带 #	url 不带#
刷新页面	刷新正常（加载到hash值对应页面）	刷新页面会丢失404
兼容性（上线后）	支持低版本浏览器	是HTML5新增的所以不兼容低版本浏览器