Web前端-Vue--路由，本地mock数据搭建，keep-alive，active-class，重定向redirect

路由

   路由的最基本配置:

    1.下载vue-router模块(我们搭建vue项目时 已经勾选下载 所以在这不需要重复下载)

    2.在main.js 使用import语句 引入vue-router模块

    3.让vue加载路由功能
      Vue.use(VueRouter)

   创建vue对象 配置路由

    1.创建VueRouter对象  构造函数传入大括号 配置路由
    2.VurRouter 常用的属性:
        1.mode(路由模式):  hash和history
          hash:哈希模式(路径后面带/#/)

          history 历史路径模式 (需要服务器环境配置
            开发时不影响 一旦打包 如果失去了服务器配置环境  那么页面空白)

        2.base: 基本路径
            例如:  我们的vue路径是  www.myvue.com

                  加入 base:"itszt" 后

                  路径是:
                      www.myvue.com/itszt/

      3.routes 配置路由路径的
        值是一个数组  数组里面每一个路由 都是一对大括号

        每一个路由对象 的配置:

          path:"" //路径是什么
          component:组件对象  //访问什么组件
          name:"" //给当前组件起名字 (后面传参要用到)

      4.把new出来的 配置好的 路由对象 绑定给vue对象
          在Vue的大括号里面 定义属性名  router: new出来的那个VueRouter对象

      5.把router-view这个标签  写到指定位置 让路由显示出来

<keep-alive>
      <!--vue2.0提供了一个keep-alive组件,
      用来缓存组件,避免多次加载相应的组件,减少性能消耗-->
      <router-view/>
    </keep-alive>

        那么路由在回退时 不触发mounted钩子函数了
        因为这个标签的作用就是让组件可以缓存
        那么也就是不触发mounted  如果我们的数据是在mounted里面获取的
        那么一旦回退 数据不重新获取了
        那么怎么才能重新获取呢
        跟keep-alive标签对应的钩子函数就是activated

 

 

import Vue from 'vue'
import App from './App'
import VueRouter from "vue-router"
import Student from "./components/Student"
import Teacher from "./components/Teacher"

Vue.use(VueRouter);


var myrouter=new VueRouter({
    // mode:"hash" 默认
    // base:"itszt"
    routes:[
      {


        path:"/student",
        component:Student


      },
      {
        path:"/teacher",
        component:Teacher

      },



    ]



});




new Vue({
  el: '#app',
  //把路由对象注册进Vue
  router:myrouter,

  components: { App },
  template: '<App/>'
})

*   在main.js里面直接做路由的配置 虽然效果是没问题的
*   但是代码结构太乱

*   我们要把路由的所有配置代码单独提出去  写成一个js文件
*
*   在js文件里面 把路由配置成功 new出来 router对象
*
*   最后 通过 export default router; 把配置好的对象对外暴露
*
*   在main.js里面通过 import语句 引入这个对外暴露的router对象
*   最后把router对象在Vue里面注册一下

maina.js文件代码

import Vue from 'vue'
import App from './App'


import router from "./router"  //如果引入的是一个文件夹  则默认找index


//router跟el  components属性名 一样是Vue规定好的
new Vue({
  el: '#app',
  //键和值一样
  router,

  components: { App },
  template: '<App/>'
})

router/index.js文件代码

import Vue from 'vue'
import VueRouter from "vue-router"

Vue.use(VueRouter);

import Home from "../components/Home";
import Gwc from "../components/Gwc";
import User from "../components/User";

var router=new VueRouter({
  mode:"history",

  routes:[

    //当前/路径 表示 页面加载时 默认访问首页  访问首页时  默认router-view展示哪个组件
    {
      path:"/",
      component:Home

    },
    {
      path:"/gwc",
      component:Gwc

    },
    {
      path:"/user",
      component: User

    }
  ]
})

//我们需要把创建出来的 router对象 导出 去   main.js才可以导入
export default router;

app.vue代码   用<router-view></router-view>展示组件

<template>
  <div id="app">
      <h1>我是app首页的导航</h1>
    <ul id="nav">
      <li><a href="/">首页</a></li>
      <li><a href="/gwc">购物车</a></li>
      <li><a href="/user">个人中心</a></li>
    </ul>

      <router-view></router-view>

  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>


</style>

控制路由跳转的方式

控制跳转路由的方式有很多
          比如原生的 a标签  路径写上路由路径 则可以跳转
              还有 js代码的 window.location="路由路径"

         但是这些跳转  都是原生提供的

router路由模块里面两种对应的跳转方式:

         1.静态标签跳转:  router-link标签
            router-link标签 必须有的属性 to属性
            表示当前的路由跳转目标 如果没有就报错
            router-link一旦加上to属性 那么默认解析成a标签

            tag="li" 表示把 router-link标签解析成li标签
                或者其他标签也可以  可以改成任意标签

            如果想要给route-link标签绑定事件
            vue提供了  给自定义组件标签绑定事件的方式:
              @事件名称.native="驱动函数"
              通过添加.native时间修饰符 能够给自定义组件绑定事件

<router-link @click.native="show" tag="div" to="/">首页</router-link>
<router-link @click.native="show" tag="div" to="/gwc">购物车</router-link>
<router-link @click.native="show" tag="div" to="/user">个人中心</router-link>

         2.动态js代码跳转: this.$router.push("路由路径")
            通过自己写标签 给标签添加点击事件  js代码的方法跳转路由

        会记录历史记录的跳转方式
            this.$router.push("路由路径") 就是js控制路由跳转
        不会有历史记录的跳转方式

            this.$router.replace("路由路径")

            如果跳转到下一个路由用的是 replace方法 那么当前页面路由不会记录到历史记录中

<template>
  <div id="app">
   <h1>我是App.vue主页</h1>
 
<!--      静态标签的方式跳转路由-->
   <!-- <router-link @click.native="show" tag="div" to="/">首页</router-link>
    <router-link @click.native="show" tag="div" to="/gwc">购物车</router-link>
    <router-link @click.native="show" tag="div" to="/user">个人中心</router-link>-->

  <p>
    <button @click="go1">首页</button>
    <button @click="go2">购物车</button>
    <button @click="go3">个人中心</button>


  </p>


    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    show(){
      alert("路由即将要跳转")
    },
    go1(){
      this.$router.push("/")

    },
    go2(){
      // this.$router.push("/gwc")
      this.$router.replace("/gwc")

    },
    go3(){
      this.$router.push("/user")

    }
  }
}
</script>

<style>

</style>

 子路由的配置

  子路由就是在当前路由下面  还有路由

      例如:
          当前路由是:  /gwc

          子路由可以是  /gwc/list1    /gwc/youhui   /gwc/xiaoliang

      子路由的配置步骤:
        1.找到要配置子路由父路由对象

        2.在父路由的对象里面 添加一个属性 children:[]

        3.在children的中括号里面添加子路由对象进行配置

        4.子路由对象也是path  component name三个属性

        5.配置完以后 要把router-view放到父路由的页面模板自己找个位置

main.js代码

import Vue from 'vue'
import Router from 'vue-router'
import Home from "../components/Home"
import Gwc from "../components/Gwc"
import User from "../components/User"
//引入User路由的三个子路由对象
import Tuijian from "../components/User/Tuijian"
import Logout from "../components/User/Logout"
import Setting from "../components/User/Setting"


Vue.use(Router)

export default new Router({
  mode:"history",
  routes: [
    {
      path: '/',
      component:Home

    },
    {
      path: '/gwc',
      component:Gwc

    },
    {
      path: '/user',
      component:User,
      children:[
        {
          path:"/user/", //表示 跳转到/user时  user里面的router-view默认显示推荐这个子路由
          component:Tuijian

        },
        {
          path:"/user/logout",
          component:Logout
        },
        {
          path:"/user/setting",
          component:Setting
        }


      ]

    },
  ]
})

子路由的父模块代码

<template>
    <div>
        <h2>个人中心</h2>
      <ul>
        <li @click="logout">注销登陆</li>
        <li>修改密码</li>
        <li @click="setting">帮助与设置</li>
      </ul>

      <router-view></router-view>

    </div>
</template>

<script>
    export default {

      methods:{
        logout(){
          this.$router.push("/user/logout")

        },
        setting(){
          this.$router.push("/user/setting")
        }

      }
    }
</script>

<style scoped>

</style>

 路由跳转之间的传参(包括父子路由)

         有两种:

            1.path+query方式传参
                跳转时传参数:
                   this.$router.push({
                  path:"/路由路径",
                  query:{
                    //要传过去的键值对
                    键1:值1,
                    键2:值2
                    .
                    .
                    .

                  }

                })

              跳转过去后接受参数:
                在目标路由的mounted方法里面 接受传过来的路由参数
                this.$route.query 接受到传过来的键值对那个对象
                通过 this.$route.query.键1 获取值
                通过 this.$route.query.键2 获取值
                .
                .
                .

              path+query方式路由传参时  会在地址栏体现出参数的拼接

go2(){
      // this.$router.push("/gwc")
      //path+query的方式传参
      this.$router.push({
        path:"/gwc",
        query:{
          mobile:"13812345678",
          userid:"10026"
        }

      })
    }

    export default {
        name: "Gwc",
      mounted(){
          /*console.log("传过来的参数是:",this.$route.query);
          console.log("传过来手机号是:",this.$route.query.mobile);
          console.log("传过来用户号是:",this.$route.query.userid);*/
      }
    }

            2.name+params方式传参
                这种方式前提必须保证 路由配置时  已经添加了name属性
             路由跳转时传参数
                this.$router.push({
                  name:"路由配置时的name值",
                  params:{
                    //要传过去的键值对
                    键1:值1,
                    键2:值2
                    .
                    .
                    .

                  }

                })

            目标路由展现时  接收路由提交过来的参数:

                this.$route.params 接受到传过来的键值对那个对象
                通过 this.$route.params.键1 获取值
                通过 this.$route.params.键2 获取值
                .
                .
                .
  *         这种方式传的参数 不在地址栏体现出来 所以一旦页面刷新
          数据就会丢失 只有第一次跳转过来传的那一次能够接收到

go3(){
      // this.$router.push("/user")

    //  给user传路由参数
      this.$router.push({
        name:"User",
        params:{
          mobile:"13912345678",
          userid:10086
        }
      })
    }

 mounted(){
        console.log("传过来的参数是:",this.$route.params);
        console.log("传过来手机号是:",this.$route.params.mobile);
        console.log("传过来用户号是:",this.$route.params.userid);


        if(this.$route.params.mobile){//如果有再赋值
          //  给当前组件的data里面的一个变量赋值
          this.mobile=this.$route.params.mobile;

        }


      }

 

动态路由

    {
      // path: '/gwc',  //这个是固定路由 也就是 跳转时 只能匹配/gwc
                      //如果我的需求是 /gwc/10006 是小强的购物车
      //                              /gwc/10007 是小白的购物车 等等等
      //               那么此时我们需要配置动态路由

      path:"/gwc/:id", //这个:id是自己随便起的名字 表示声明一个id变量 以后所有的/gwc/随便 的路由都能跳转到购物车页面
      name:"Gwc",
      component:Gwc

    }

本地mock数据搭建

1.打开cmd全局安装json-server  
    输入命令 cnpm/npm install json-server -g

2.找到自己要mock的json文件 复制到一个单独文件夹
    用cmd切换到json文件所在的目录

3.输入命令 json-server 文件名.json --port 自己想一个端口 -h自己电脑ip

        -h可以不写 默认以localhost启动

 

active-class

• 类型: string

• 默认值: "router-link-active"

  设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

   <ul>
          <router-link 
          replace
          :to='{name:v.path}'
          tag="li"
          v-for="(v,i) in products" :key="i"
          active-class="haha"
          @click.native="show(i)"
          >{{v.name}}</router-link>
  </ul>

  .left_inner li.haha,
  .left_inner li:hover {
      background: #4fc08d;
      color: #fff;
    }

  路由重定向

•       //访问/detail时  自动重定向去访问analysis子路由
        redirect:"analysis",