路由

通过路由就可以让我们的vue项目完成 页面之间的跳转 同时展示多个页面

路由—可以实现SPA(单页面应用)只有一个html页面的应用 模拟多个页面的跳转
传统项目 如果想完成多个页面 那么就要几个页面 新建几个html页面 这样是没有问题 只是在页面切换的时候 会有白屏效果 用户体验不好
为了解决上述的问题 所以 使用单页面应用技术 就可以很好的解决页面切换的白屏问题
单页面技术就是只有一个html页面 在我们切换页面的时候 html不变 变得是html’中渲染的内容

路由的原理

通过url的不同来切换不同的路由页面

创建

方式1

脚手架自动创建

在创建的时候 选中Router配置项即可
在创建完成项目之后会发现项目的src文件夹下出现了两个新文件夹
router文件夹 就是用来配置路由相关操作的文件夹
view文件夹 页面文件夹 （就是项目中有多少个页面就把这些东西放到views文件夹下 但是工作的时候不一定叫views 也有可能叫pages或者是其他的 文件夹的名字不一定）

方式2

手工配置创建
1.下载路由(vue-router库) npm install --save vue-router
2.创建router文件夹 并且新建index.js文件 在其中进行引用 配置 和路由规则的设置 并且创建vuews文件夹新建路由页面

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [

  {
    path: '/about',
    name: 'About',
 
    component: () => import('../views/About.vue')
  },
  {
    path: '/about',
    name: 'About',
 
    component: () => import('../views/About.vue')
  },
]

3.实例化路由对象 并且把路由规则注入到路由实例中

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

4.在app.vue中设置一级路由的路由出口 router-view
5 设置路由导航 404页面配置 重定向

基本1级路由创建

1.在src的views页面文件夹下创建你的对应路由页面
2.在src的router文件夹下的index.js中配置路由的规则
默认index.js是配置好的 所以我们删除一些不用的配置项

import Vue from 'vue'//引用vue
import VueRouter from 'vue-router'//vue-router就是可以给我们提供路由的功能
import Home from '../views/Home.vue'

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

const routes = [//我们可以在此数组对象中配置路由的规则
  {
    path: '/', //url路径
    name: 'Home',//给当前的这个路由规则起个名字随便写
    component: Home//根据path路径所匹配的组件页面
  },

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

开始配置我们自己的路由页面规则
（1）先把我们要使用的路由页面引用在index.js中
（2）然后开始配置

import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.把我们要用的路由页面都引用进来
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'

Vue.use(VueRouter)

const routes = [
  // 2.开始配置
  {
    path: '/', 
    name: 'Home',
    component: Home
  },
  {
    path: '/about', 
    name: 'About',
    component: About
  },
  {
    path: '/phone', 
    name: 'Phone',
    component: Phone
  },
  {
    path: '/user', 
    name: 'User',
    component: User
  },
  {
    path: '/shop', 
    name: 'Shop',
    component: Shop
  },

]

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

export default router

路由导航

通过路由导航 可以让用户点击之后 进行页面的切换(原生的时候 使用的是a标签 或者是js的 window.location.href 这些方式来进行跳转的 在vue中给我们提供的跳转方式是 路由导航)

标签方式—声明式导航

就是使用标签的方式来进行页面的跳转 在vue中 这个标签就是 router-link

但是我们写的router-link在浏览器渲染的时候 会被渲染成a标签（我们不能写a标签 虽然浏览器会渲染 但是我们不能写）

语法:

to属性配置的是路径
<router-link to="/去哪里">你要在页面显示的内容</router-link>

   <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/shop">shop</router-link> |
      <router-link to="/phone">phone</router-link> |
      <router-link to="/user">user</router-link> |
导航动态类—router-link-active

在我们设置router-link之后 用户在页面切换的时候 程序会自动的给选中的导航添加一个 router-link-active的类名
作用 ：就是可以非常方便的让我们来设置样式 从而在页面展示出用户选择的导航 让其高亮

js方式—编程式导航

语法: this.$router.push(“/去哪里”)

<template>
  <div>
      user
      <button @click="fun()">点我去shop页面</button>
  </div>
</template>

<script>
export default {
    methods:{
        fun(){
            // 编程时导航跳转
            this.$router.push("/shop")
        }
    }
}
</script>
更多的编程式导航

this. r o u t e r . r e p l a c e ( " / 去 哪 里 " ) 替 换 页 面 替 换 之 后 页 面 不 能 回 退 t h i s . router.replace("/去哪里") 替换页面 替换之后页面不能回退 this. router.replace("/去哪里")替换页面替换之后页面不能回退this.router.go(“正数与负数”) 1 前进一个页面 -1后退一个页面

路由模式

设置的时候通过mode属性来进行设置

hash

hash模式 vue路由模式的默认模式
hash模式在url中带#
hash模式刷新页面不丢失
hash浏览器兼容性好

history

history 模式在url中不带#（今后我们写的页面有可能需要在原生的app中进行嵌入 在这个时候有些app的限制 导致我们不能在url中出现#所以此时我们应该设置路由模式为history模式）
history模式刷新页面丢失（上线之后会丢失）
history模式浏览器兼容性比较差

路由重定向—redirect

重（重新）定（定位）向（方向）
语法：
{path:“/”,redirect:“/你的首页”}

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'

Vue.use(VueRouter)
const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/phone',
    name: 'Phone',
    component: Phone
  },
  {
    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User
  },

  // 重定向
  {
    path:"/",
    redirect:"/home"
  }
  
]

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

export default router

404错误提示页面

千万要注意写在路由规则的最下面

千万要注意写在路由规则的最下面

千万要注意写在路由规则的最下面

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
import No from '../views/no.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/phone',
    name: 'Phone',
    component: Phone
  },
  {

    path: '/shop',
    name: 'Shop',
    component: Shop
  },
  {
    path: '/user',
    name: 'User',
    component: User
  },

  // 重定向
  {
    path:"/",
    redirect:"/home"
  },

  // 最下面配置404页面
  {
    path:"*",
    component:No
  }  
]

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

export default router

二级或者多级路由–children

1.新建二级路由页面在views下

2.在router下的index.js中进行二级或者多级路由规则的配置

​ (1)引用

（2)配置 必须必须必须必须必须 在1级路由规则中进行配置 使用children

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home.vue'
import Phone from '../views/phone.vue'
import Shop from '../views/shop.vue'
import User from '../views/user.vue'
import No from '../views/no.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: '/phone',
    name: 'Phone',
    component: Phone
  },
  {

    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:"*",
    component:No
  }  
]

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

export default router

3.千万千万千万不要忘了 一定一定一定 要在对应的一级路由页面创建 路由出口 router-view

<template>
  <div>
      <Link/>
      user
      <!-- 设置路由出口 -->
      <router-view/>
      
   </div>
</template>

<script>
export default {

}
</script>

扩展-----二级路由path

上面发现我们在配置二级路由规则的时候 path路径是这样写的

 children:[
      {
        path: '/era',//    带/
        name: 'era',
        component: Era
      },
      {
        path: '/erc',//    带/
        name: 'erc',
        component: Erc
      },
      {
        path: '/erd',//    带/
        name: 'erd',
        component: Erd
      },
    ]

如果在配置二级路由的时候 path带/ 那么在进行路由导航的时候

<router-link to="/二级路由的路径"></router-link>

还有一种写法 就是path路径不带 /

 children:[
      {
        path: 'era',//不带  /
        name: 'era',
        component: Era
      },
      {
        path: 'erc',//不带  /
        name: 'erc',
        component: Erc
      },
      {
        path: 'erd',//不带  /
        name: 'erd',
        component: Erd
      },
    ]

如果路径不带 / 那么路由导航必须是

<router-link to="/一级路由路径/二级路由的路径"></router-link>
# vue.js # 前端 # javascript
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue