Vue学习笔记|路由、详细、入门

目录

1.什么是路由

2.前端路由和后端路由的区别

3.路由应用实例

4.嵌套路由

5.路由传参

6. 路由缓存方式

7. router相关函数

8. 组件不被销毁

9.路由守卫

10. 路由器的两种工作模式

11. 注意点

---

---

---

1.什么是路由

路由是一组映射关系（key-value）
key是路径，value可能是function或者component

2.前端路由和后端路由的区别

2.1 后端路由
    1）value是function，用于处理客户端提交的请求
    2）工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    
2.2 前端路由
    1）value时component，用于展示页面内容
    2）工作过程：当浏览器的路径发生变化，对应的组件就会显示

3.路由应用实例

                                           

如图，左边是导航栏，右边是内容区。

当点击About，在内容区切换About组件的内容，

当点击Home，在内容区切换Home组件的内容，

3.1 下载router包

vue2:npm i router@3

vue3:npm i router@4

3.2 配置路由信息

假设有两个组件，对应两个路由

import VueRouter from 'vue-router'
import About from '../components/About'
import Home from '../components/Home'

export default new VueRouter({
    routes:[
        {
            path:'/about',
            component:About
        },
        {
            path:'/home',
            component:Home
        }
]
})

3.3 引入路由

在main.js文件引入路由

import VueRouter from 'vue-router'
import router from './router/index'

Vue.use(VueRouter)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router:router
}).$mount('#app')

3.4 路由的使用

其中，标签用于放导航栏，点击不同的导航，切换content中不同的组件

          用于展示对应的组件内容

  

    About
    Home
    

      
      
    
  

4.嵌套路由

                                        

 如图，当点击Home时，在Home组件中，又添加了News和Message路由，只需要在路由配置文件中，添加二级路由。

        {
            path:'/home',
            component:Home,
            children:[
                {
                    path:'message',
                    component:Message
                },
                {
                    path:'news',
                    component:News
                }
            ]
        }

5.路由传参

5.1 params传递参数

5.1.1 配置路由，声明接收params参数

在path后使用“：变量名”作为占位符接收params参数

children:[
                        {
                            name:'detail',
                            path:'detail/:id/:title',
                            component:Detail,
                        }
                    ]

5.1.2 传递参数（二选一即可）

字符串传递参数

  {{i.title}}

对象传递参数

注意：对象传递参数只能使用name进行路由跳转，不能使用path

  {{i.title}}

5.1.3 参数接收

       
{{$route.params.id}}}
       
{{$route.params.title}}}

5.2 query传递参数

5.2.1传递参数（二选一即可）

字符串传递参数

如图，可以向路由传递id和title,注意，变量需要在${}中写，整个字符串需要加上` `

 

             
    {{i.title}} 
    
 
 

对象传递参数

 

             
    {{i.title}}
 
 

5.2.2 参数的接收

参数保存在每个组件的$route.query中，可以通过以下获得组件传递的参数

 

        
{{$route.query.id}}}
        
{{$route.query.title}}}
    

5.3 props传递参数

5.2.1对象写法

传递key和value

      children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail,
                            props:{
                            id:'001',
                            title:'我是标题'
                            }
                        }
               ]

detail组件接收参数

 props:['id','title'],

detail组件使用参数

  
{{id}}
  
{{title}}

5.2.2 props为布尔值(结合params使用)

      children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail,
                            props:true
                        }
               ]

意义：将路由收到的所有params参数通过props传给Detail组件

接收参数和使用参数与5.2.1一致

5.2.3 函数写法（结合query使用）

     children:[
                        {
                            name:'detail',
                            path:'detail',
                            component:Detail,
                            props($route){
                                return{
                                    id:$route.query.id,
                                    title:$route.query.title
                                }
                            }
                        }
               ] 

接收参数和使用参数与5.2.1一致

6. 路由缓存方式

1. push方式

每改变路由，都会将最新的路由放入路由栈中，作为栈顶

2. replace方式

每改变路由，都会替换路由栈中已有的路由

7. router相关函数

使用除了之外的标签进行路由的跳转

使用函数this.$router.push  和 函数this.$router.replace可以改变路由，两者的区别见第六条。

 pushShow
 replaceShow


methods:{

            pushShow(i){
                this.$router.push({
                    name:'detail',
                    query:{
                        id:i.id,
                        title:i.title
                    }
                })
            },

            replaceShow(i){
                this.$router.replace({
                    name:'detail',
                    query:{
                        id:i.id,
                        title:i.title
                    }
                })
            },
}

使用路由进行前进后退

this.$router.back()  :  后退一步

this.$router.forward()  :  前进一步

this.$router.go(2)  :  前进两步

            back(){
                this.$router.back();
            },



            forward(){
                this.$router.forward();
            },



            go(){
                this.$router.go(2);
            }

8. 组件不被销毁

在router-view外边加入，在include中写入不被销毁的组件名，这样即使当组件切换时，该组件也不会被销毁，从而可以保存一些数据

9.路由守卫

路由守卫的作用：前端判断是否操作者有权限使用该路由，若没有权限，则拦截路由

9.1全局前置路由守卫

初始化时候被调用，每次路由切换前被调用

当需要跳转的路径为/home/message 或者 /home/news时，判断是否有权限，并进行相关的操作

router.beforeEach((to, from, next )=>{
    if(to.path==='/home/message' || to.path==='/home/news'){
        if(判断是否有权限){
            //有权限
            next();
        }else{
            //没有权限相关操作
        }
    }else{
        next();
    }
})

9.2全局后置路由守卫

初始化时候被调用，每次路由切换后被调用

如下，在每次路由切换后，更改页面的标题

router.afterEach((to)=>{
    document.title=to.meta.title || '霍格沃兹';
})

其中，meta是配置在路由信息中的一个属性，meta是固定的一个key，不可修改

{
            name:'about',
            path:'/about',
            component:About,
            meta:{
                title:'关于'
            }
}

9.3 独享路由守卫（只有前置，没有后置）

独享前置路由守卫写在路由配置中，如下图所示。

{
                    name:'news',
                    path:'news',
                    component:News,
                    meta:{
                        title:'新闻',
                        isAuth:true
                    },
                    beforeEnter:(to,from,next)=>{
                        if(to.meta.isAuth){
                            if(localStorage.getItem('school')=='霍格沃兹'){
                                next();
                            }else {
                                alert('学校不对，无权查看');
                            }
                        }else{
                            next();
                        }
                    }

}

9.4 组件路由守卫

故名思意，组件路由守卫写在组件内，当进入组件前和离开组件的时候会调用组件路由守卫

        beforeRouteEnter(to,from,next){
        
           //进入组件前可以进行权限控制
        },
        beforeRouteLeave(to,from,next){
           
           //离开组件后可以进行数据的处理等等操作
            
        }

10. 路由器的两种工作模式

1）hash模式

在vue框架中，路由默认使用hash模式

特征：路径中带有#，hash值不会带给服务器

2）history模式

特质：history模式的路径不带#，且路径会带到服务器，并向服务器请求资源

使用history模式在服务器会出现问题：请求路径找不到，因为这是前端部分写的路径，服务器并不能识别。

解决：

安装插件

npm i connect-history-api-fallback
在服务器中使用插件，注意：要在引用静态资源之前使用插件

const express=require('express')
const history=require('connect-history-api-fallback')
const app=express();
app.use(history())
app.use(express.static(__dirname+'/static'))
app.get('/person',(req,resp)=>{
    resp.send({
        name:'小僵',
        age: 18
    })
})

11. 注意点

1）通过切换，被隐藏的组件，默认被销毁

2）整个组件只有一个router,可以通过组件的$router获取

3）每个组件都有$route属性，存路由信息，this.$route可以获取路由信息

4）二级路由path不需要加/