定制化开发Vue中的路由

目录

 

一，路由理解

1）理解： 一个路由（route）定制化开发就是一组映射关系（key-value)，定制化开发多个路由需要路由器（router）进行管理

2）前端路由：key是路径，value是组件

3）作用：定制化开发设定访问路径，定制化开发并将路径和组件映射起来（定制化开发就是用于局部刷新页面，定制化开发不需要请求服务器来切换页面）

二，基本配置

        前期准备： 安装vue-router 全局配置 ，命令： npm i vue-router  （定制化开发默认安装的是4定制化开发版本适配的是vue3，定制化开发如果使用的是vue2的话，必须选定3版本   npm i vue-router@3。

        第一步:  在main.js定制化开发文件中引入并使用插件

  1. // 第一步: 引入router 插件
  2. import VueRouter from 'vue-router'
  3. // 使用插件
  4. Vue.use(VueRouter)

        第二步: 在src定制化开发文件夹下创建一个router定制化开发文件夹然后在文件夹下创建index.js

index.js定制化开发中写路由的核心代码

  1. // 定制化开发该文件是专门用于创建定制化开发整个应用的路由器
  2.  
  3. // 定制化开发第一步引入插件(定制化开发本质是一个构造函数)
  4. import VueRouter from 'vue-router'
  5.  
  6. // 定制化开发引入一下用到的组件 
  7. import About from '../components/About'
  8.  
  9. // 定制化开发第二步创建router定制化开发实例对象并暴露
  10. export default new VueRouter({
  11.     routes: [
  12.         {
  13.             // path是路径
  14.             path: "/about",
  15.             //定制化开发跳转的组件
  16.             component: About
  17.         },       
  18.     ]
  19. })
  20. // 然后去main.js中引入router实例

第三步: 回到main.js中引入创建的 router 并在vue实例对象中使用

  1. // 引入Vue
  2. import Vue from 'vue'
  3. // 引入App
  4. import App from './App'
  5. // 第一步: 引入router 插件
  6. import VueRouter from 'vue-router'
  7. // 使用插件
  8. Vue.use(VueRouter)
  9. // 第二步: 创建router文件夹 引入实例
  10. import router from './router'
  11.  
  12. // 关闭生产提示
  13. Vue.config.productionTip = false
  14.  
  15.  
  16. // 创建vm
  17. new Vue({
  18.     // 指定容器
  19.     el: '#app',
  20.     // 解析App模板
  21.     render: h => h(App),
  22.     // 使用路由
  23.     router
  24. })

路由的基本就配置完成了

三，路由的使用

实例演示，先把静态页面准备好。

第一点：在路由中的改变

由路由管理的地方 a标签转换成 router-link 标签  href="相对路径" 变成 to="路由路径"

要显示组件的地方需要用到 router-view占位，当点击时显示About组件中的内容时就会替换掉router-view

通常由路由管理的组件单独放在pages文件夹下，不需要在App组件中引入和注册

  1. <template>
  2.   <div>
  3.     <div class="row">
  4.       <Banner></Banner>
  5.     </div>
  6.     <div class="row">
  7.       <div class="col-xs-2 col-xs-offset-2">
  8.         <div class="list-group">
  9.           <!-- a标签在路由器中被router-link取代 -->
  10.           <!-- 使用路由提供的标签 点击跳转到/about路径 显示哪个组件在路由中配置好-->
  11.           <!-- active-class 点击时激活类名 -->
  12.           <router-link class="list-group-item" active-class="active" to="/about"
  13.             >About</router-link>
  14.           <router-link class="list-group-item" active-class="active" to="/home"
  15.             >Home</router-link>
  16.         </div>
  17.       </div>
  18.       <div class="col-xs-6">
  19.         <div class="panel">
  20.           <div class="panel-body">
  21.             <!-- 这里存放由路由分配 这里放显示的组件类似于slot-->
  22.             <!-- 显示的组件会替换掉router-view -->
  23.             <router-view></router-view>
  24.           </div>
  25.         </div>
  26.       </div>
  27.     </div>
  28.   </div>
  29. </template>
  30.  
  31. <script>
  32. // 自己引入的组件  由路由管理的组件成为路由组件,通常放在pages文件夹下面
  33. // 和普通的组件分开 而且不需要引入和注册
  34. import Banner from "./components/Banner";
  35. export default {
  36.   name: "App",
  37.   // 组测组件
  38.   components: { Banner },
  39. };
  40. </script>
  41.  
  42. <style>
  43. </style>

路由中的配置

  1. // 该文件是专门用于创建整个应用的路由器
  2.  
  3. // 第一步引入插件(本质是一个构造函数)
  4. import VueRouter from 'vue-router'
  5.  
  6. // 引入要用到的组件 
  7. import About from '../pages/About'
  8. import Home from '../pages/Home'
  9.  
  10. // 第二步创建router实例对象并暴露
  11. export default new VueRouter({
  12.     routes: [
  13.         {
  14.             
  15.             // 当路径跳转到/about时显示About组件
  16.             path: "/about",
  17.             component: About
  18.         },
  19.         {
  20.             path: "/home",
  21.             component: Home
  22.         }
  23.        ]
  24. })
  25. // 然后去main.js中引入router实例

 第二点，多级路由

        多级路由用到了children属性  routes中的属性成为一级路由，一级路由中children属性中的沉稳给二级路由以此类推，出一级路由中路径要写斜杠/  二级路由和多级路由中的路径不写斜杠/

跳转多级路由时,to="路由路径"   要写全!从一级路由开始写!(如: to="/home/news")

可以给路由配置name属性，传递参数的时候会用到，添加name属性后跳转就不用写全路径，可以直接写路由的name   （:to="{name:'msg'}"）

  1. routes:[
  2.    	{
  3.    		path:'/about',
  4.    		component:About,
  5.    	},
  6.    	{
  7.    		path:'/home',
  8.    		component:Home,
  9.    		children:[ //通过children配置子级路由
  10.    			{    
  11.                 name:'news'
  12.    				path:'news', //此处一定不要写：/news
  13.    				component:News
  14.    			},
  15.    			{
  16.                 name:'message'
  17.    				path:'message',//此处一定不要写：/message
  18.    				component:Message,
  19.                 children: [
  20.                      {        
  21.                             name:'msg'
  22.                             path: 'msgdata',
  23.                             component: Msgdata,
  24.    			        }
  25.    		        ]
  26.    	}
  27.    ]

 第三点，路由的传参

有两种传参方式，第一种query传参 第二种params传参

query传参

有两种写法 一个是字符串写法直接写在路径中拼接   ？+参数  ，

第二种时对象写法  ，把路径单独写，数据单独写

数据传递根据的是路由路径

  1. <!-- 跳转并携带query参数，to的字符串写法 -->
  2.    <router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
  3.    				
  4.    <!-- 跳转并携带query参数，to的对象写法 -->
  5.    <!-- name:'detail' 可以写路由的name 也可以直接写路径 -->
  6.    <router-link 
  7.    	:to="{
  8.    		path:'/home/message/detail',
  9.    		query:{
  10.    		   id:666,
  11.            title:'你好'
  12.    		}
  13.    	}"
  14.    >跳转</router-link>

组件接收数据

用到$route.query

  1. <template>
  2.   <div>
  3.     <h3>信息编号:{{ $route.query.id }}</h3>
  4.     <h3>信息标题:{{ $route.query.title }}</h3>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   name: "Msgdata",
  11. };
  12. </script>
  13.  
  14. <style>
  15. </style>

当有多个需要传递的参数时,总在模板中写 $route.query,    肯定是不好的,这时候就需要路由中接收并包装一下

还可以在路由设置中进行获取然后再传递到组件  可以用到props,写在组件的路由中

  1. routes:[
  2.    	{
  3.    		path:'/about',
  4.    		component:About,
  5.    	},
  6.    	{
  7.    		path:'/home',
  8.    		component:Home,
  9.    		children:[ //通过children配置子级路由
  10.    			{    
  11.                 name:'news'
  12.    				path:'news', //此处一定不要写：/news
  13.    				component:News
  14.    			},
  15.    			{
  16.                 name:'message'
  17.    				path:'message',//此处一定不要写：/message
  18.    				component:Message,
  19.                 children: [
  20.                      {
  21.                             path: 'msgdata',
  22.                             component: Msgdata,
  23.                         //在这里接收一下传来的参数,然后包装一下再传给组件
  24.                             props($route){
  25.                                return {id:$route.query.id,title:$route.query.title}
  26.                                  }     
  27.    			        }
  28.    		        ]
  29.    	}
  30.    ]

组件接收一下

  1. <template>
  2.   <div>
  3.     <h3>信息编号:{{ id }}</h3>
  4.     <h3>信息标题:{{ title }}</h3>
  5.   </div>
  6. </template>
  7.  
  8. <script>
  9. export default {
  10.   name: "Msgdata",
  11.   props: ["id", "title"],
  12. };
  13. </script>
  14.  
  15. <style>
  16. </style>

params传参

params传递参数也有两种方式

第一种直接路径传递参数

在路径中直接加 引号内的东西都会当成字符处理,所以给to加上冒号让他解析成表达式,但是表达式没有以斜杠开头的,所以加上` 模板引号 又变成了字符串,然后用${}配合模板字符串。

  1.  <router-link :to="`/home/news/shownews/${n.id}/${n.name}`">
  2. {{ n.name }}
  3.  </router-link>

 第二种方式写成对象形式

第二种方式必须写name不可以用path作为路径

  1. <router-link
  2.           :to="{
  3.             // 用params传递参数时用到他的对象写法中不可使用 path:'路径'
  4.             name: 'shownews',
  5.             params: {
  6.               id: n.id,
  7.               name: n.name,
  8.             },
  9.           }"
  10.         >
  11.           {{ n.name }}
  12.         </router-link>

 ！！！

传递但是，params传递需要路由路径中配置占位符不然不知道哪个是路径哪个是数据

  1.  name: 'shownews',
  2. // params 写法先在路径中占位 路径后面跟上占位符
  3. path: 'shownews/:id/:name',
  4. component: ShowNews,

组件使用时和query相似

  1. <ul>
  2.     <!-- query里面写数据 -->
  3.     <li>编号{{ $route.params.id }}</li>
  4.     <li>姓名{{ $route.params.name }}</li>
  5.   </ul>

这里也是如果有很多数据需要用时，可以借助路由包装一下，只需要props的值为true

  1. name: 'shownews',
  2. // params 写法先在路径中占位
  3. path: 'shownews/:id/:name',
  4. component: ShowNews,
  5. // props的第二种写法 props为布尔值,会接收所有params参数 以props的形式传递给Detail组件
  6. props: true
  1. <template>
  2.   <ul>
  3.     <!-- query里面写数据 -->
  4.     <li>编号{{ id }}</li>
  5.     <li>姓名{{ name }}</li>
  6.   </ul>
  7. </template>
  8.  
  9. <script>
  10. export default {
  11.   name: "ShowNews",
  12.   props: ["id", "title"],
  13. };
  14. </script>

replace属性

```<router-link>```的replace属性  不留下操作记录

1. 作用：控制路由跳转时操作浏览器历史记录的模式

2. 浏览器的历史记录有两种写入方式：分别为```push```和```replace```，```push```是追加历史记录，```replace```是替换当前记录。路由跳转时候默认为```push```

3. 如何开启```replace```模式：```<router-link replace .......>News</router-link>```

四，编程式路由导航

        1.作用：不借助```<router-link> ```实现路由跳转，让路由跳转更加灵活，不仅a标签可以跳转，

按钮也可以跳转

        2. 借助两个API   push和replace

  1.  //$router的两个API
  2.     //push跳转 有操作记录
  3.    this.$router.push({
  4.    	name:'xiangqing',
  5.    		params:{
  6.    			id:xxx,
  7.    			title:xxx
  8.    		}
  9.    })
  10.    //replace 跳转没有操作记录  把之前的replace跳转记录销毁
  11.    this.$router.replace({
  12.    	name:'xiangqing',
  13.    		params:{
  14.    			id:xxx,
  15.    			title:xxx
  16.    		}
  17.    })

 三个操作函数

   this.$router.forward() //前进

   this.$router.back() //后退

   this.$router.go() //可前进也可后退

 五，缓存组件和两个生命周期钩子

1，缓存路由组件

1. 作用：让不展示的路由组件保持挂载，不被销毁。

2. 具体编码：


 <keep-alive  include="要缓存的组件名" >

<router-view></router-view>

</keep-alive>

如果想要缓存多个组件           :include="['News','message']"    (冒号不要忘了，双引号里面要用单引号)

  1.  
  2.  
  3.    <keep-alive include="News">
  4.  
  5.        <router-view></router-view>
  6.  
  7.    </keep-alive>

2，两个新的生命周期钩子

1. 作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2. 具体名字：

   1）activated路由组件被激活时触发。

   2）deactivated路由组件失活时触发。

六，路由守卫

1. 路由守卫的作用 ： 对路由进行权限管理，必须符合条件才能访问。

2.路由守卫有三种： 全局守卫、独享守卫、组件内守卫

第一种，全局守卫

在所有的路由发生改变前都执行  使用路由守卫就不能直接暴露路由实例，需要接收一下

然后调用里面的beforeEach((to,from,next)=>{})  

有三个参数to：去哪个路径，from：从哪个路径里来，next：是个函数调用的时候next()放行

  1. // 配置在实例对象外 初始化时调用，每次发生路由变化前调用
  2.  router.beforeEach((to,from,next)=>{
  3.    	console.log('beforeEach',to,from)
  4.    	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
  5.    		if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
  6.    			next() //放行
  7.    		}else{
  8.    			alert('暂无权限查看')
  9.    			// next({name:'guanyu'})
  10.    		}
  11.    	}else{
  12.    		next() //放行
  13.    	}
  14.    })
  15.    
  16.    //全局后置守卫：初始化时执行、每次路由切换后执行
  17.    router.afterEach((to,from)=>{
  18.    	console.log('afterEach',to,from)
  19.    	if(to.meta.title){ 
  20.    		document.title = to.meta.title //修改网页的title
  21.    	}else{
  22.    		document.title = 'vue_test'
  23.    	}
  24.    })

第二种，独享守卫

放在需要进行权限设置的路由里面，参数语法和全局一样  当访问这个路径前才执行beforeEnter()

  1. beforeEnter(to,from,next){
  2.    	console.log('beforeEnter',to,from)
  3.    	if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
  4.    		if(localStorage.getItem('school') === 'atguigu'){
  5.    			next()
  6.    		}else{
  7.    			alert('暂无权限查看')
  8.    			// next({name:'guanyu'})
  9.    		}
  10.    	}else{
  11.    		next()
  12.    	}
  13.    }

第三种，组件守卫

放在组件里和methods，components同级别 ，

必须是通过路由规则进入该组件才可以调用

beforeRouteEnter（），beforeRouteLeave（）

  1.  
  2.  
  3.    //进入守卫：通过路由规则，进入该组件时被调用
  4. beforeRouteEnter (to, from, next) {
  5.    },
  6.    //离开守卫：通过路由规则，离开该组件时被调用
  7. beforeRouteLeave (to, from, next) {
  8.    }

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发