Vue路由

路由

一一对应的映射关系 。访问路由返回对应的.vue组件页面。思想就是照搬后端的路由思想 。

1.路由介绍

2.路由安装

npm i vue-router

3.基本使用

页面级的.vue组件（pages或views），不是公共组件（components）

​
// 项目中肯定要使用路由的。
// 渐进式的框架
//1. 安装 npm i vue-router
//2. 引入vue-router 并实例化
import VueRouter from 'vue-router'
Vue.use( VueRouter )
​
//5. 引入所有的要配置路由的页面
import index from './views/index.vue'
import login from './views/login.vue'
import register from './views/register.vue'
import shop from './views/shop.vue'
import my from './views/my.vue'
​
let router = new VueRouter({
  routes:[ //4. 配置一条一条的规则
      //
      { path:'/index',component:index },
      { path:'/login',component:login },
      { path:'/register',component:register },
      { path:'/shop',component:shop },
      { path:'/my',component:my },
  ]
})
​
/*
  但是可以理解为：这是页面级的组件 ：按照规范放在views或pages中
  /index=> index.vue
  /login=> login.vue
  /register = > register.vue
  /shop => shop.vue 购物车
*/
​
new Vue({
  //3. //Vue实例中添加路由功能
  router,
  render: h => h(App),
}).$mount('#app')
​

在App.vue设置路由的出口

<template>
  <div class="box">
    my is App.vue
    <!-- 占个坑：路由的出口 -->
    <!-- 匹配上路由规则后，页面组件就会呈现在中 -->
    <router-view></router-view>
  </div>
</template>

4.路由重定向

{ path:'*',redirect:'/index' }, //重定向

5.路由跳转组件

<router-link></router-link>
<hr>
<router-link to="/login">登录</router-link> 
<hr>
<!-- 跳转到注册 -->
<router-link to="/register">注册</router-link> 

弊端：

不加验证就可以跳转：则可以使用此方式

5.1.高亮路由导航链接

5.2.自定义高亮类名

<footer class="footer">
      <!-- router-link在浏览器中渲染成a标签 -->
        <!-- <span to="/index/home">首页</span>
        <span class="active" to="/index/cates">分类</span>
        <span to="/index/shop">购物车</span>
        <span to="/index/my">我的</span> -->
​
        <!-- tag: 告诉router-link要渲染成哪个标签 -->
        <!-- active-class : 告诉router-link，当前匹配上的路由类名 -->
        <router-link tag="span" active-class="active" to="/index/home">首页</router-link>
        <router-link tag="span" active-class="active" to="/index/cates">分类</router-link>
        <router-link tag="span" active-class="active" to="/index/shop">购物车</router-link>
        <router-link tag="span" active-class="active" to="/index/my">我的</router-link>
</footer>

<style scoped>
  .footer span{
    display: inline-block;
    padding: 5px 10px;
    cursor: pointer;
  }
  /* .footer .active,.footer .router-link-active{
    color: red;
  } */
​
   .footer .active{
    color: blue;
  }
</style>

6.编程式导航

好处：也可以实现页面跳转，可以加验证。

this.$router.push('/index')
replace
go()

7.嵌套路由[二级路由]

{ 
        path:'/index',  //要承载 home/my/shop/cates4个页面的 ，要在index.vue中要占坑：<router-view>
        component:index,  //这4个页面要展示的公共的东西就要放在index.vue中
        children:[
          { path:'my',component:my }, //嵌套的路由前面不用加 /index/my
          { path:'shop',component:shop },   //   /index/shop
          { path:'cates',component:cates },   //   /index/shop
          { path:'home',component:home },   //   /index/shop
          { path:'',redirect:'home' }
        ]
}