vue-route嵌套使用

最新推荐文章于 2023-12-27 11:40:39 发布

骨子里的偏爱

最新推荐文章于 2023-12-27 11:40:39 发布

阅读量308

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41823246/article/details/125101340

版权

vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue Router的使用，包括如何设置router-link的活性指示器，如通过CSS样式和属性修改；展示了路由的懒加载实现，利用`import()`语法按需加载组件；并探讨了路由的嵌套使用，创建子路由以构建复杂应用结构。这些内容有助于提升Vue应用的性能和用户体验。

摘要由CSDN通过智能技术生成

一、router-link的其他属性

1.css样式:

 .router-link-active{
  color:red;
}

2.router-link:

 replace active-class="active"

style:

.active{
  color: red;
}

3.修改路由vue-router

 methods: {
    homeClick () {
    // 通过代码的方式修改路由vue-router
      this.$router.push('/home')
    },
    aboutClick () {
      // 通过代码的方式修改路由vue-router
      this.$router.push('/about')
    }
  }

二、vue-router路由懒加载的使用

// 安装插件
Vue.use(Router)

const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')
const User = () => import('../components/User.vue')

三、路由的嵌套使用

在这里插入图片描述

const HomeNews = () => import('../components/HomeNews.vue')
const HomeMessage = () => import('../components/HomeMessage.vue')

 {
      path: '/Home',
      name: 'Home',
      component: Home,
      // 两个子孩子
      children: [
        {
          path: 'news',
          component: HomeNews

        }, {
          path: 'Message',
          component: HomeMessage
        }
      ]
    },