路由配置与用法

路由

1.概念

Vue.js 路由允许我们通过不同的 URL 访问不同的内容, 实现单页面应用的多页面切换效果。

Vue.js 路由需要载入 vue-router 库.

2.安装

1.先安装
vue create vue-route-demo

2.选择自定义
Manually select features

3.使用空格的方式选择 router   需要取消选择linter（如下图）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tlaN1WEa-1660483924468)(E:\3.插入到md的图片\路由1)]

4.选择2X
5.选择y
6.Sass/SCSS (with dart-sass)
7.In package.json
8.Save this as a preset for future projects? (y/N)--y

3.views文件配置

1、router配置文件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n80C8Qxu-1660483924471)(E:\3.插入到md的图片\路由2)]

2、router里面的index中

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'//配置的路由器在routersz中

Vue.use(VueRouter)


const router = new VueRouter({//实例化路由管理对象
  mode: 'history',//分为两种history和hash
  base: process.env.BASE_URL,
  routes:routes// 上面导入就可以写到这里了，因为如果对象key value一样，可以只写一个routes
})
export default router// 抛出的这个必须挂在根实例的身上，所有去main.js导入 

3、抛出的router挂载在main.js中

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  // 将router路由管理对象挂载到根实例身上，在任何一个组件中都可以通过组件实例获取到路由管理对象this.$router
  // 根实例上的对象是所有属性共享的
  router,
  render: h => h(App)
}).$mount('#app')

4、routers文件中

4.1、组件获取方式

方式一：
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/index',
    name: 'index',
    component: HomeView//路由地址对应的组件，是页面刚打开，就从网上下载下来，用这个网页初次打开速度很慢

方式二：（推荐使用方式二）
const routes = [
  {
    path: '/index',
    name: 'index',
  // 回调函数加载，路由懒加载，在页面跳转时候加载组件，什么时候跳转路由，什么时候加载组件
    component: () => import('../views/index.vue'),  

4.2、路由表

总结：1.每一级路由最后最好加上重定向路由和404路由

​ 2.二级路由前必须加上一级路由的地址

​ 3.二级路由加载一级路由底下，创建一个children

// 路由表，一个理由代表一个规则，注册过的才有用
const routes = [
  {
    path: '/index', // 浏览器后面什么都没有就是/,也可以这样写path: '/'，这就是路由地址
    name: 'index',//使用动态路由的时候，可以使用这个名字，他就代表上面的地址
    component: () => import('../views/index.vue'),//跳转到哪个路由就加载
    // 二级路由，二级路由要带上一级路由的前缀
    children: [  
      {
        // path: '/index/home/:id',//动态路由传参
        path: '/index/home',//二级路由的地址
        name: 'home',
        component: () => import('../views/index/home.vue'),
      },
      {
        path: '/index/list',
        name: 'list',
        component: () => import('../views/index/list.vue'),
      },
      // 二级路由，初始打开页面是，路由重定向，选择先加载一个页面
      // 重定向：先找/,找到了先和一级的所有比较，和index相等，然后再找二级路由重定向，找到二级，所以做了两次重定向
      {
        path: '/index',
        redirect: '/index/home',//路由重定向
      },
       // 404路由，如果路由和前面都不相等的时候，只能放在最后
       // 二级路由不用设置404路由，因为先路由从前往后查看没有一样的，就全部页面都显示404
       // 如果不想让一级路由隐藏，就给二级路由也设置404路由，就可以实现一级路由依旧存在
      {
        path: '*',
        component: () => import('../views/NotFond.vue')
      },
    ]
  },
  {
    path: '/register',
    name: 'register',
    component: () => import('../views/register.vue')
  },
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login.vue')

  },
  // 一级路由重定向路由
  {
    path: '/',
    redirect: '/index',
  },
  // 一级路由404路由，
  {
    path: '*',
    component: () => import('../views/NotFond.vue')
  },
]
// 抛出
export default routes

4.组件中配置

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lO6a12CM-1660483924472)(E:\3.插入到md的图片\路由.png)]

4.1、App.vue中代码

router-link	1.你要跳的地址必须和路由表中的地址对应上，就是和router中的地址 2.router-link是vue-route提供的一个专用于跳路由组件 3.router最终是渲染了一个a标签，href后面的是路由地址，后面的class是对比地址栏和跳转的路由地址是不是一样 4.如果直接写a标签，就没有类名了，不会自己自己切换active 5.如果写的路由地址和规定的不一样，就不加载和渲染页面，但是URL地址仍然改变，匹配失败就跳转不了
router-view	1.路由出口，相当于一个占位符，决定要渲染的组件在页面的什么位置， 2.这里具体渲染什么和浏览器地址匹配 3.先看router-link和路由表中哪个地址相等，就渲染哪个组件到出口的这个位置

<template>
  <div id="app">
     <router-link to="/home">Home</router-link>
     <router-view> </router-view>
</template>
<script>
export default {
};
</script>
<style lang="scss">
</style>

4.2、路由传参

路由传参	刷新页面	参数个数	下个页面怎么拿到这个参数（在下一个页面的mounted）
path+query传参方式	参数不会丢	可以传多个参数	this.$route.query（除了APP，其他可以获取到）
name+params传参方式	参数会丢失	可以传多个参数	this.$route.params
动态路由传参	参数不会丢失	只传一个参数	this.$route.params

  1.传参方式path+query传参方式 ，刷新页面参数不会丢失，可以穿多个参数
<router-link class="iconfont icon-elemo" :to="{path:'/index/home',query:{id:888,neme:'11'}}">首页</router-link> 

  2.传参方式name+params传参方式，刷新页面参数会丢失,  //name后面可以使用路径简写的那个名字
 <router-link class="iconfont icon-elemo" :to="{name:'home',params:{id:888,neme:'11'}}">首页</router-link> 
  //在路由表中需要设置   path:'/index/home/:id',

 3.动态路由传参 ，路由表里面要有：id,刷新页面参数不会丢失比较稳定，不要使用动态路由进行定向，只能传一个参数
<router-link class="iconfont icon-elemo" :to="'/index/home/'+888">首页</router-link>

4.如果用vant组件引进来的代码
 <van-tabbar v-model="active" route>//需要在这里加上route
     <van-tabbar-item icon="home-o" to="/index/home">首页</van-tabbar-item>
  </van-tabbar>

 5.不传参数的类型
 <router-link class="iconfont icon-elemo" to="/index/home">首页</router-link> 

4.3、一级路由index里面的代码

<template>
  <div id="app">
      <keep-alive>//避免重复的卸载创建
          <router-view> </router-view> //二级组件路由的出口，需要渲染的组件
      </keep-alive>
       //路由跳转，如果要使用vant可以使用以下方式来
        <van-tabbar v-model="active" route>
          <van-tabbar-item icon="home-o" to="/index/home">首页</van-tabbar-item>
          <van-tabbar-item icon="search" to="/index/list">订单</van-tabbar-item>
          <van-tabbar-item icon="friends-o" to="/index/tuan">爆爆团</van-tabbar-item>
          <van-tabbar-item icon="friends-o" to="/index/mine">我的</van-tabbar-item>
        </van-tabbar>
  </div>
</template>
<script >
export default {
  data() {
    return {
      active: 0,
    };
  },
};
</script>
<style lang="scss">
</style>

4.4、this.$router和this.$route

区别
this.$router	路由管理对象 , 用来管理路由(跳路由)
this.$route	由对象 , 用来获取路由信息( 包含有和当前路由相关的所有属性 )