5. vue路由

伤心猪大肠
346 阅读2分钟

Vue路由

路由的概念

  1. 路由是一个比较广义抽象的概念，路由的本质就是对应关系
  2. 在开发中，路由分为：后端路由和前端路由
  3. 后端路由：
概念：根据不同的用户URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系
xx:前端路由负责事件监听，触发事件后，通过事件函数渲染不同内容
  1. SPA：
1. 后端渲染存在性能问题
2. Ajax前端渲染，性能提高，但是不支持浏览器的前进和后退操作
3. SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新，同时支持浏览器地址栏的前进和后退
4. SPA实现原理之一：基于RUL地址的hash，hash的变化会导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请教
5. 在实现SPA过程中，最核心的技术点就是前端路由
  1. 前端路由：
概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

Vue-router基本使用步骤

  1. 引入相关的库文件
import Router from 'vue-router'
  1. 添加路由链接和路由填充位
<template>
  <div id="app">
    <p>
      // 路由链接
      <router-link to="/login">登录</router-link>
      <router-link to="/registered">注册</router-link>
    </p>
    // 路由填充位
    <router-view></router-view>
  </div>
</template>
// router-link 是 vue 提供的标签，默认会渲染为a标签
// to 属性默认会渲染为href属性，属性值渲染为#开头的hash地址
// 路由填充位也叫路由占位符，将来通过路由规则匹配到的组件，将会被渲染到router-view所在位置
  1. 定义路由组件
就是组件没啥好说的
  1. 配置路由规则并创建路由实例
Vue.use(Router)
// 创建路由实例对象
export default new Router({
    // 路由规则数组
    routes: [
        // 每个路由规则是一个配置对象，至少包含path和component两个属性
        // path 表示当前路由规则匹配的hash地址
        // component 表示当前路由规则对应要展示的组件
        {
            path: '/login',
            component: () => import('./components/login.vue')
        },
        {
            path: '/registered',
            component: () => import('./components/registered.vue')
        }
    ]
})
  1. 把路由挂载到Vue根实例中
import router from './router.js'
new Vue({
  router: router,
  render: h => h(App),
}).$mount('#app')

路由重定向

1.在路由的基本使用案例中,一进入页面是空白的，只有通过点击才会出现内容，假如我们想一开始就有内容，那么就可以使用路由重定向
2.路由重定向指的是：用户在访问地址A的时候，强制用户跳转到C地址，从而显示特定的组件页面
3.通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向
{
  // 原来的路由地址
  path: '/',
  // 指定的新路由地址
  redirect: '/login'
},

Vue-router的嵌套

如果'/registered'路由组件里面还有其他路由，那么就用到了路由嵌套
1. 在'/registered'路由组件里面添加路由链接和路由填充位，路由地址为'/registered/子路由'
2. 在路由配置里找到'/registered'路由规则，通过‘children’属性添加子路由规则
{
    path: '/registered',
    component: () => import('./components/registered.vue'),
    children: [
      { path: '/registered/tab1', component:()=> import('./components/tab1.vue') },
      { path: '/registered/tab2', component:()=> import('./components/tab2.vue') }
    ]

},

Vue-router动态路由匹配用法

如果有很多个路由路径，那么我们使用动态路由匹配就很方便了，我们只需要把不一样的部分设置成动态路由参数即可
1. 在路由匹配里面，只需要把 path属性设置成这样 `/相同的:id`，使用一条路由规则即可
{ path: '/registered/tab:id', component:()=> import('./components/tab.vue') },
2. 只需要一个tab组件
3. '/registered' 路由组件里面的子路由组件
<router-link to="/registered/tab1">tab1</router-link>
<router-link to="/registered/tab2">tab2</router-link>
<router-link to="/registered/tab3">tab3</router-link>
4. 子路由组件里面，通过{{$route.params.id}}获取路由参数,此次id与`/相同的:id`对应

Vue-router命名路由用法

就是给路由规则起了一个名字
{
  path: '/login:id',
  name:'login',
  component: () => import('./components/login.vue')
},
// 实现路由跳转
<router-link :to="{name:'login',params:{id:123}}">登录</router-link>
//params 可以传递参数

Vue-router编程式导航用法

页面导航分为：声明式导航如普通网页中的<a>链接和vue中<router-link>和编程式导航如普通网友页的location.href

  • // vue中的编程式导航
  1. this.$router.push()跳转到指定的页面
//push参数规则
1. 字符串，代表路径名称
2. 对象{path:'路径名称',params:{id:123}},路径和参数
3. 带查询参数,地址会变为如：/registered?id=12
{path:'/registered',query:{id:12}}
  1. this.$router.gp(n) 前进和后退
avatar
文章
阅读
粉丝