Vue-router路由组件的使用方法(基础且重要)

Vue-router路由的基本使用方法

在学习了vue-router之后总结的基础用法：路由的创建与配置，路由规则的编写，路由组件的访问，参数的传递，路由的生命周期函数，路由守卫的方法和作用…等常用的一些知识点

路由作用：实现SPA single page web application 单页面web应用

SPA的简单理解：

• 整个应用只有一个完整的页面（index.html）
• 点击页面中的导航链接不会刷新页面，而是局部更新(请求通过ajax)

vue-router的模式：（key）某个资源路径 ==> (value)对应的组件

配置方法

1. 创建router目录下index.js文件，引入vue-router插件和组件，配置路由

   //引入vue-router插件
   import VueRouter from 'vue-router'
   import About from '../components/About.vue' //组件
   import Home from '../components/Home.vue'
   
   //配置路由
   export default new VueRouter({
       routes:[
           {
               path:'/about', //设置路径
               component:About
           },
           {
               path:'/home',
               component:Home
           },
       ]
   })
   

2. 在main.js中引入插件和上面的配置文件

   import Vue from 'vue'
   import App from './App.vue'
   import VueRouter from 'vue-router'
   import router from './router'
   Vue.config.productionTip = false
   Vue.use(VueRouter)
   
   new Vue({
     router:router,
     render: h => h(App),
   }).$mount('#app')
   

   3. 使用：

      对于a标签的链接使用该标签与 to 属性访问对应组件

      <router-link class="list-group-item" active-class="active" to="/about" >About</router-link>
      

      使用 router-view 展示组件

      <router-view></router-view>
      

嵌套路由（多级路由）

配置子路由使用children属性：

{
            path:'/home',
            component:Home,
            //配置子路由
            children:[
                {
                    path:'message', //子路由不需要加 ‘/’
                    component:Message,
                    children:[
                        {
                            name:'detail',
                            path:'item',
                            component:Item
                        }
                    ]
                },
                {
                    path:'news',
                    component:News
                }
            ]
},

name属性：

可以为该路由命名，在链接跳转的标签中使用name从而避免过长的路径名

<!-- 
跳转的方式：
    1.完整路径方式： to="/home/message/item"
    2.表达式解析路径方式： :to="{name:'detail'}" 必须在路由配置项中添加：name:'detail'属性 一定要加 “:” 才能解析这个表达式
-->

query属性：

在路由组件中传递数据

<router-link :to="{
        name:'detail',
        query:{
            id:msg.id,
            info:msg.info
        }
        }">query传递参数</router-link>

风格：http://localhost:8080/#/home/message/item?id=001&info=消息001

接受数据：

$route.query.id
$route.query.info

params传递参数：

1.需要在路由path中配置参数占位,表明由params接收：

path:'message', //子路由不需要加 ‘/’
component:Message,
children:[
       {
        name:'detail',
        path:'item/:id/:info', //表明用params接收传递的占位参数
		component:Item
	 }
 ]

2.在to中传入配置对象参数属性:

<router-link :to="{
        name:'detail',
        params:{
            id:msg.id,
            info:msg.info
        }
}">{{msg.id}}-{{msg.title}}</router-link>

注意：使用params传参需要路由不能使用path属性，而是必须使用name属性

风格：http://localhost:8080/#/home/message/item/003/消息003

3.接收参数

路由的props配置

常用的两个用法：

{
	name:'xiangqing',
	path:'detail/:id',
	component:Detail,
	//第一种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
	// props:true
	
	//第二种函数写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件 函数接受的参数为route对象
	props(route){
		return {
			id:route.query.id,
			title:route.query.title
		}
	}
    //使用解析构值语法写成：
    props({query}){ //{params}
		return {
			id:query.id,
			title:query.title
		}
	}
}

注意：用法一只是针对params参数传递，而方法二更灵活

接收参数的方式：

直接在接收参数的路由组件当中声明props属性接收

router-link标签中的replace属性

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

2. 浏览器的历史记录利用栈结构管理。有两种写入方式：分别为push和replace，

   push是追加历史记录

   replace是替换当前记录。路由跳转时候默认为push

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

编程式路由跳转

router-link在模板解析后是a标签，而要实现其他方式实现路由跳转

//$router的两个API
//实现跳转，并且历史记录实现入栈
this.$router.push({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
//实现跳转，但栈顶（当前记录）被替换为跳转后的记录
this.$router.replace({
	name:'xiangqing',
		params:{
			id:xxx,
			title:xxx
		}
})
//实现历史记录的跳转
this.$router.forward() //前进
this.$router.back() //后退

路由缓存组件

路由的默认缓存机制：路由组件在被点击时挂在，而在切换到其他组件时自动销毁

因此组件中临时的缓存就被清除，要实现某些路由组件切换时其中有要保留的缓存，即路由不被销毁，使用`````标签：

<keep-alive include="要实现缓存的组件名"> //多个请使用 :include="['a','b']"
	<router-view></router-view>
</keep-alive>

路由组件生命周期钩子

1. 作用：用于捕获路由组件的激活状态。
2. 具体名字：
   1. activated路由组件被激活时触发。
   2. deactivated路由组件失活时触发。

activated(){
	//该路由组件激活时触发
}
deactivated(){
	//该路由组件失活时触发
}

路由守卫

1. 作用：对路由进行权限控制

2. 分类：全局守卫、独享守卫、组件内守卫

3. 全局守卫:

   //全局前置守卫：初始化时执行、每次路由切换前执行
   router.beforeEach((to,from,next)=>{
    ...(编写相应的放行规则或条件判断)
   		next() //放行
   	}
   })
   
   //全局后置守卫：初始化时执行、每次路由切换后执行
   router.afterEach((to,from)=>{
   	...(编写放行后进入组件后实现的方法)
   })
   

4. 独享守卫：在路由配置项中配置

   beforeEnter(to,from,next){
   		...(编写相应的放行规则或条件判断)
   		next()//放行，与全局前置一样，但是这是对单个组件应用
   }
   

5. 组件内守卫：在对应组件中使用**（注意：该组件是必须经过路由规则才会触发）**

   //进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }
   

路由工作模式：

vue中路由配置默认mode=”hash“，即在url中端口号后面有 “#” 号，目的在于使得井号后面的路径不会作为后端访问路径向服务器请求

解决的方式是mode=“history”,这种模式是使得其路径能够向服务器发送请求，但是对于静态资源，如果在该路径下刷新就会404，所以依靠后端技术处理该问题

以上是关于vue-router组件一些基础的使用方法