Vue-router

Posted on by hackdl

router的使用（5+2）

5个基础步骤：

1.在终端执行yarn add vue-router@3.6.5，安装router插件

yarn add vue-router@3.6.5

2.在文件的main.js中引入router插件

import VueRouter from 'vue-router'

3.在main.js中安装注册Vue.use(Vue插件)

Vue.use(VueRouter)

4.在main.js中创建路由对象

const router = new VueRouter()

5.注入到new Vue中，建立关联

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

2个核心步骤：

1.创建需要的组件（views目录)，配置路由规则

import Find from './views/Find.vue'
import Friend from './views/Friend.vue'
import My from './views/My.vue'
Vue.use(VueRouter)//VueRouter插件初始化

 
const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/find',component:Find},
    {path:'/my',component:My},
    {path:'/friend',component:Friend}
  ]
})

2.准备导航链接，配置路由出口


  

    

      发现音乐
      我的音乐
      我的朋友

Vue Router 提供了以下常用的标签和功能：

  1. ：渲染一个标签，点击时会导航到指定的路由。
  2. ：用于渲染匹配到的路由组件。
  3. router-link组件的to属性：用于指定要跳转的目标路由，可以是字符串或对象。
  4. router-view组件：用于根据当前路由匹配到的组件进行渲染。

路由的封装抽离

目标：将路由模块抽离出来

好处：拆分模块，利于维护

在src目录下创建router文件，在文件中创建index.js文件，将main.js中的路由模块抽离到index.js文件中

import VueRouter from 'vue-router'
import Find from '../views/Find.vue'
import Friend from '../views/Friend.vue'
import My from '../views/My.vue'

import Vue from 'vue'
Vue.use(VueRouter)//VueRouter插件初始化

 
const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/find',component:Find},
    {path:'/my',component:My},
    {path:'/friend',component:Friend}
  ]
})

export default router

在main.js中引入index.js文件

import router from './router'

声明式导航-导航链接

需求：实现导航高亮效果

vue-router提供了一个全局组件router-link（取代a标签）

  1. 能跳转，配置to属性指定路径（必须）。本质还是a标签，to无需#
  2. 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

1.router-link-active 模糊匹配（用的多）

to = ‘/my’ 可以匹配/my /my/a /my/b …….

2.router-link-exact-active 精确匹配

to = ‘/my’ 仅可以匹配 /my


  

    

      发现音乐
      我的音乐
      我的朋友
    

    

      
    

  


.footer_wrap a.router-link-active{
  background-color: aqua;
}

自定义匹配类名

const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/find',component:Find},
    {path:'/my',component:My},
    {path:'/friend',component:Friend}
  ],

  linkActiveClass:'active',
  linkExactActiveClass:'exact-avtive'

})
.footer_wrap a.active{
  background-color: aqua;
}

声明式导航-跳转传参

目标：在跳转路由时，进行传值

1.查询参数传参

语法格式如下

  • to = ‘/path?参数名 = 值’

对应页面组件接收传递过来的值

  • $route.query.参数名

  

    百度
    网易
    腾讯
  




  

    
搜索关键字：{{ $route.query.key }}

2.动态路由传参

1.配置动态路由

const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/search/:words',component:Search},
    {path:'/home',component:Home}
  ],

  linkActiveClass:'active',
  linkExactActiveClass:'exact-avtive'

})

2.配置导航链接

  • to=”/path/参数值”

  

    百度
    网易
    腾讯

3.对应页面组件接收传递过来的值

服务器托管网

  • $route.params.参数名

  

    
搜索关键字：{{ $route.params.words }}

Vue路由-重定向

问题：网页打开，url默认是/路径，未匹配到组件时，会出现空白

说明：重定向：匹配path后，强制跳转path路径

语法：

{path: 匹配路径，redirect:重定向到的路径}

const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/',redirect:'/home'},
    {path:'/search/:words',component:Search},
    {path:'/home',component:Home}
  ],

  linkActiveClass:'active',
  linkExactActiveClass:'exact-avtive'

})

Vue路由-404

作用：当路径找不到时，给个提示页面

位置：配在路由最后

语法：

{path:”*”(任意路径)-前面不匹配就命中最后这个}

const router = new VueRouter({
  // 路由规则
  routes:[
    {path:'/',redirect:'/home'},
    {path:'/search/:words',component:Search},
    {path:'/home',component:Home},
    {path:'*',component:NotFound}
  ],

  linkActiveClass:'active',
  linkExactActiveClass:'exact-avtive'

})

Vue路由-模式设置

问题：路由的路径看起来不自然，有#，能否切成真正的路径模式

  • hash路由（默认）例如：http://localhost:8080/#/home
  • history路由（常用）例如：http：//localhost:8080/home（以后上线需要服务器端支持）
const router = new VueRouter({
    mode:'history',
  // 路由规则
  routes:[
    {path:'/',redirect:'/home'},
    {path:'/search/:words',component:Search},
    {path:'/home',component:Ho服务器托管网me},
    {path:'*',component:NotFound}
  ],

  linkActiveClass:'active',
  linkExactActiveClass:'exact-avtive'

})

历史记录在vue-router中的使用

历史记录在Vue Router中主要通过router对象来管理。具体来说，你可以使用this.$router来访问router对象。

要在Vue Router中使用历史记录，你可以通过以下方式进行操作：

编程式导航： 你可以使用this.$router.push()方法来向历史记录添加一个新的条目，或者使用this.$router.replace()方法来替换当前的历史记录条目。例如：

// 添加新的历史记录条目
this.$router.push('/new-route');

// 替换当前的历史记录条目
this.$router.replace('/new-route');

控制历史记录： 你可以使用this.$router.go()方法来在历史记录中前进或后退多少步，也可以使用this.$router.back()和this.$router.forward()方法来执行后退或前进操作。

// 后退一步
this.$router.go(-1);

// 前进一步
this.$router.go(1);

监听历史记录变化： 你可以通过监听this.$router对象的事件来处理历史记录的变化。例如，你可以监听beforeEach、beforeResolve和afterEach等事件来执行相应的操作。

this.$router.beforeEach((to, from, next) => {
  // 在导航触发之前执行的逻辑
});

this.$router.afterEach((to, from) => {
  // 导航完成后执行的逻辑
});

实现嵌套路由

// 父路由组件
const router = new VueRouter({
  routes: [
    { path: '/parent', component: ParentComponent, children: [
      { path: 'child', component: ChildComponent }
    ]}
  ]
});

命名视图

命名视图（Named Views）是 Vue Router 提供的一项功能，允许你在同一个页面中同时显示多个命名视图的内容。这在构建复杂的页面布局时非常有用，可以让不同的组件渲染到页面中不同的位置。

在 Vue Router 中使用命名视图，需要在路由配置中指定每个视图的名称，并在组件中使用 标签来显示对应名称的视图内容。

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: HomeComponent,
        header: HeaderComponent,
        sidebar: SidebarComponent
      }
    }
  ]
});

在上面的路由配置中，我们定义了三个命名视图：default、header 和 sidebar，分别对应不同的组件。然后在页面模板中可以这样使用：

导航守卫

导航守卫是 Vue Router 中用于控制路由跳转的功能，可以在路由导航过程中进行一些操作，比如权限验证、页面加载前后的处理等。导航守卫主要分为全局前置守卫、全局解析守卫、全局后置钩子和路由独享守卫。

1. 全局前置守卫（Global Before Guards）

  • beforeEach(to, from, next)：在路由跳转之前调用，常用于进行权限验证或其他全局操作。

2. 全局解析守卫（Global Resolve Guards）

  • beforeResolve(to, from, next)：在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后调用。

3. 全局后置钩子（Global After Hooks）

  • afterEach(to, from)：在导航完成之后调用，常用于页面切换后的一些操作。

4. 路由独享守卫（Per-Route Guard）

  • beforeEnter(to, from, next)：在单个路由配置中定义的守卫，在进入该路由前调用。
  • const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: HomeComponent,
      beforeEnter: (to, from, next) => {
        // 进入路由前的操作，如权限验证
        if (userAuthenticated) {
          next();
        } else {
          next('/login');
        }
      }
    }
  ]
});

router.beforeEach((to, from, next) => {
  // 全局前置守卫，可用于登录状态验证等
  next();
});

router.afterEach((to, from) => {
  // 全局后置钩子，在导航完成后调用
});

    路由元信息

    路由元信息是 Vue Router 中一种特殊的字段，允许你在路由对象中添加额外的自定义信息，比如页面标题、权限要求、页面描述等。这些元信息可以在路由导航过程中访问，并根据需要进行处理。

    export default {
  mounted() {
    console.log(this.$route.meta.title); // 输出 'Home Page'
  }
};

在路由组件中，你可以通过 this.$route.meta 来访问路由的元信息

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
      meta: { requiresAuth: true, title: 'Home Page' }
    }
  ]
});

路由过渡动效

Vue Router 提供了过渡效果的功能，可以让页面在路由切换时产生动画效果，提升用户体验。你可以使用 Vue 的 组件或 组件来实现路由过渡动效。

使用组件：


  
    
  



.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

使用组件：


  
    
  



.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter, .slide-leave-to {
  transform: translateX(100%);
}

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 传输频宽是啥？对网速影响有多大？

频宽，即WIFI频道宽度，又称为WIFI信道宽度，是WiFi Channel width的缩写。从科学的定义来说，Wi-Fi频道宽度，是指Wi-Fi无线信号在频谱上所占用的带宽大小。它决定了Wi-Fi网络的数据传输速率和稳定性，一般有20MHz、40MHz、8…

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用

服务器托管

咨询：董先生

电话13051898268 QQ/微信93663045！

上一篇:
下一篇: