vue-route嵌套使用

一、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
        }
      ]
    },