vue-router使用

朱雀 2022-12-26 08:10 111阅读 0赞

一、搭建vue-router框架  
1、安装vue-router

npm install vue-router --save

2、在模块化工程中使用它  
(1)导入路由对象，并调用Vue.use(VueRouter)

import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

(2)创建路由实例，并传入路由映射配置

const router = new VueRouter({ 
      //配置路由和组件之间的映射关系
      routes:[]
    })

(3)在Vue实例中挂载创建的路由实例  
导出

export default router

再main.js中导入挂载

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

二、使用vue-router  
1、创建路由组件，eg:Home.vue和About.vue

<div>
      <h3>我是关于</h3>
      <p>我是内容,about</p>
    </div>

2、配置路由映射：组件和路径映射关系(index.js)

const routes = [
      { 
        path:'/home',
        component:Home
      },
      { 
        path:'/about',
        component:About
      }
    ]

3、使用路由：通过router-link和router-view标签  
在App.vue中

4、运行，点击哪个，显示对应内容：  
![在这里插入图片描述][20201203205417824.png]  
延伸：  
1、设置路由的默认路径

const routes = [
      { 
        path:'/',
        redirect:'/home'
      }
    ]

2、hash模式修改为history模式

mode:'history'

3、router-link其他属性  
to：用于跳转至指定路径  
tag：指定将router-link渲染成什么组件，默认为a标签

<router-link to="/home" tag="button">首页</router-link>

replace：不会留下历史，后退键不能返回上一级  
active-class：当router-link对应路由匹配成功时，会给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称  
(1)局部

<router-link to="/home" tag="button" active-class="active">首页</router-link>

(2)全局（index.js）

linkActiveClass:'active'

4、代码跳转路由(无参数)

<div id="app">
    	<button @click="homeClick">首页</button>
    	<button @click="aboutClick">关于</button>
    </div>
    ....
    <scripts>
    	methods: { 
    	  homeClick() { 
    	    this.$router.push('/home')
    	  },
    	  aboutClick() { 
    	    this.$router.push('/about')
    	  }
    	}
    </scripts>
    push=pushState=replace

5、改变url，但是页面不进行整体的刷新方法：  
(1)hash，eg：location.hash = ‘aaa’  
(2)html5的history，eg：①history.pushState(\{\},’’,‘my’)，返回上一级：history.back()或者history.go(-1);②history.replaceState(\{\},’’,‘home’)，不可以返回.  
三、动态路由  
1、创建路由组件，eg:User.vue  
2、配置路由映射：组件和路径映射关系

const routes = [
      { 
        path:'/user/:id',
        component:User
      }
    ]

3、使用路由：通过router-link和router-view标签  
在App.vue中

<template>
    	<div id="app">
    	    <router-link :to="'/user/' + userId">用户</router-link>
    	    <router-view></router-view>
    	  </div>
      </template>
      .....
      <script>
    export default { 
      name:'App',
      data(){ 
        return { 
          userId:'TiMi'
        }
      }
    }
    </script>

4、运行  
![在这里插入图片描述][20201203223043659.png]  
延伸：  
在页面现实TiMi  
编写User.vue，id与Index.js中对应一致

<template>
    <div>
      <p>{ { $route.params.id}}</p>
    </div>
    </template>

四、路由懒加载  
把不同路由对应的组件分割成不同的代码块，再当路由被访问时才加载，效率更高  
在index.js中修改

import Home from '../components/Home'

改成

const Home = () => import('../components/Home')

五、路由的嵌套使用  
1、创建子路由组件，eg:News.vue和Message.vue  
2、配置子路由映射：组件和路径映射关系

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

3、使用路由：通过router-link和router-view标签  
在父路由Home.vue中

4、运行，点击哪个，显示对应内容：  
![在这里插入图片描述][20201204121522517.png]  
六、vue-router参数传递  
第一种类型：params，如三所示，动态路由  
第二种类型query  
1、创建子路由组件，eg:Profile.vue  
2、配置子路由映射：组件和路径映射关系

const routes = [
      { 
        path:'/profile',
        component:Profile
      }
    ]

3、使用路由：通过router-link和router-view标签  
在父路由Home.vue中

4、运行  
![在这里插入图片描述][20201204140723298.png]  
延伸：  
1、在页面现实query对应的对象数据

<template>
    <div>
      <h3>{ { $route.query.name}}</h3>
      <h3>{ { $route.query.age}}</h3>
    </div>
    </template>

2、代码跳转路由(有参数)

<div id="app">
    	<button @click="userClick">用户</button>
        <button @click="profileClick">档案</button>
    </div>
    ....
    <scripts>
    	methods: { 
    	  userClick() { 
    	    this.$router.push('/user/' + this.userId)
    	  },
    	  profileClick() { 
    	    this.$router.push({ 
    	    path:'/profile',
    	    query:{ 
    		    name:'TiMi',
    		    age:18
    		    }
    	    })
    	  }
    	}
    </scripts>
    push=pushState=replace

七、导航守卫  
导航守卫用来监听路由的进入和离开  
1、前置守卫(guard)  
利用beforeEach来完成标题的修改，首先，利用meta来定义，其次利用导航守卫修改标题

const routes = [
    	{ 
    	    path:'/about',
    	    component:About,
    	    meta:{ 
    	      title:' 关于'
    	    }
    ]
    .....
    router.beforeEach((to, from, next) => { 
      //  从from跳转到to
      document.title = to.matched[0].meta.title
      next()
    })

2、后置钩子(hook)

router.afterEach((to,from) => { 
    })

这两种属于全局守卫  
八、vue-router的keep-alive  
keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染  
如上述子路由News和Message如何保留原状态？  
1、App.Vue

<keep-alive exclude="Profile">
          <router-view></router-view>
        </keep-alive>

2、Home.Vue

activated() { 
        this.$router.push(this.path)
      },
      deactivated() { 
      },
      beforeRouteLeave (to,from,next) { 
        //  用path记录离开时的路径
        this.path = this.$route.path
        next()
      }

注意：activated()和deactivated()两个函数在keep-alive标签存在时使用才有效

[20201203205417824.png]: /images/20221120/fcd7f7b98b834b24a286f6e2c5a5e76a.png
[20201203223043659.png]: /images/20221120/e8bac72313a44025a52f6d91cfa0943c.png
[20201204121522517.png]: https://img-blog.csdnimg.cn/20201204121522517.png
[20201204140723298.png]: https://img-blog.csdnimg.cn/20201204140723298.png