Vue-router你真的了解了吗

六、Vue-router

6.1 如何实现改变url的情况下页面不进行刷新

location.hash="xxx"
设置一个值
history.pushState({},'','')

6.2 创建路由 掌握基本的结构

在使用脚手架创建的时候使用路由,能够在src下创建一个route文件,里面的index.js来配置路由信息,并且在main.js里面进行导入

---

在components里面创建两个组件

about.vue和home.vue

<template>
  <div>
    <h2>我是关于</h2>
    <p>我是关于内容, 呵呵呵</p>
  </div>
</template>

<script>
export default {
  name: "About",
};
</script>

<style scoped>
</style>

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
  </div>
</template>

<script>
export default {
  name: "Home",
};
</script>

<style scoped>
</style>

在router/index.js文件里面引用这两个路由 并且配置路由的映射

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/home.vue'
import About from '../components/about.vue'
//通过Vue.use(插件) 来进行安装插件
Vue.use(Router)
// 创建路由对象
export default new Router({
  routes: [{
    path: '/home',
    component: Home,
  }, {
    path: '/abort',
    component: About
  }]
})

在App.vue里面进行route显示

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/abort">第二页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
</style>

最后在main.js里面设置路由的支持

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

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

6.3设置默认的路由路径

routes: [{
    path: '/',
    redirect: '/home',
  }, 

修改history

const routes = [{
  path: '/',
  redirect: '/home',
}, {
  path: '/home',
  component: Home,
}, {
  path: '/abort',
  component: About
}]
export default new Router({
  routes,
  mode: 'history',//这样就会有点击返回的功能了
})

可以在路由里面设置热点的class

export default new Router({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

自定义组件实现路由

<template>
  <div id="app">
    <!-- 添加了tag来修饰这个标签用什么形式进行显示
    replace 表示这个标签表示使用返回键已经不能在返回了-->
    <!-- <router-link to="/home" tag="button" replace>首页</router-link>
    <router-link to="/abort">第二页</router-link>-->
    <div>
      <button @click="homeClick()">首页</button>
      <button @click="aboutClick()">关于</button>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    homeClick() {
      this.$router.push("/home");
      console.log("home");
    },
    aboutClick() {
      this.$router.push("/abort");
      console.log("about");
    },
  },
};
</script>

6.4动态路由

先创建组件 User

<template>
  <div>
    <span>用户</span>
    <h2>{{userId}}</h2>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {};
  },
  computed: {
    userId() {
      return this.$route.params.id;
      //获取当前处于活跃状态的属性
    },
  },

在index.js里面

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

在App.vue里面

<div>
      <button @click="homeClick()">首页</button>
      <button @click="aboutClick()">关于</button>
      <router-link :to="'/user/'+userId">用户</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
    };
  },

6.5 懒加载

npm run build

会发现js只有三个文件 main/用户的/底层支撑的

所以要是用懒加载(index.js里面),请求哪一个路径加载哪一个

{
    path: "/home",
    component: () => import('../components/home.vue')
  },
  {
    path: "/abort",
    component: () => import('../components/about.vue')
  },
  {
    path: "/user/:id",
    component: () => import('../components/User.vue')
  }

6.6嵌套路由

首先创建两个子组件

<template>
  <div>
    <ul>
      <li>c1</li>
      <li>c1</li>
      <li>c1</li>
      <li>c1</li>
    </ul>
  </div>
</template>
与
<template>
  <div>
    <ul>
      <li>c2</li>
      <li>c2</li>
      <li>c2</li>
      <li>c2</li>
    </ul>
  </div>
</template>

在index.js里面 进行嵌套表示

{
    path: "/home",
    component: () => import('../components/home.vue'),
    children: [{
      path: '',
      component: () => import('../components/homeChild2.vue')
    }, {
      path: 'c1',
      component: () => import('../components/homeChild.vue')
    }, {
      path: 'c2',
      component: () => import('../components/homeChild2.vue')
    }]
  },

在想对应的父组件的模板里面进行引用

<template>
  <div>
    <h2>我是首页</h2>
    <p>我是首页内容, 哈哈哈</p>
    <router-link to="/home/c1">C1</router-link>
    <router-link to="/home/c2">C2</router-link>
    <router-view></router-view>
  </div>
</template>

6.7 路由传递参数

第一种:

配置路由的格式

1、在index.js里面

{
    path: "/user/:id",
    component: () => import('../components/User.vue')
  }

在地址后面传递参数

<router-link :to="'/user/'+userId">用户</router-link>
export default {
  name: "App",
  data() {
    return {
      userId: "lisi",
    };
  },

在User.vue里面进行显示

<template>
  <div>
    <span>用户</span>
    <h2>{{userId}}</h2>
  </div>
</template>

<script>
export default {
  name: "User",
  data() {
    return {};
  },
  computed: {
    userId() {
      return this.$route.params.id;
      //获取处于活跃状态的属性
    },
  },

第二种: 通过query的方式进行传递

创建Query组件

<template>
  <div>
    <span>Profile</span>
    <span>姓名: {{this.$route.query.name}}</span>
    <br />
    <span>年龄: {{this.$route.query.age}}</span>
  </div>
</template>

<script>
export default {
  name: "Profile",
  data() {
    return {};
  },
};
</script>

在index.js里面设置访问的路径

const Profile = () => import('../components/profile.vue');
 { 
    path: '/profile',
    component: Profile
  }

在App.vue里面进行引用

<router-link :to="{path:'/profile',query:{name:'lisi',age:18}}">Profile</router-link>

或者

<button @click="profileClick">Profile</button>
<button @click="userClick">用户</button>
userClick() {
      this.$router.push("/user/" + this.userId);
    },
    profileClick() {
      this.$router.push({
        path: "/profile",
        query: {
          name: "ljx",
          age: 18,
        },
      });
    },

补充:生命周期函数

export default {
  name: "Home",
  created() {
    console.log("组件被创建的时候的函数");
  },
  mounted() {
    console.log("组件的模板取代dom的时候被创立出来的,挂载的时候");
  },
  updated() {
    console.log("界面发生更新的时候");
  }
};

全局导航守护

在index.js里面进行配置

const routes = [{
    path: "/",
    redirect: "/home"
  },
  {
    path: "/home",
    component: () => import('../components/home.vue'),
    meta: {
      title: '首页'
    },
    children: [{
      path: '',
      component: () => import('../components/homeChild2.vue'),
      meta: {
        title: '孩子1'
      }
    }, {
      path: 'c1',
      component: () => import('../components/homeChild.vue'),
      meta: {
        title: '孩子1'
      }
    }, {
      path: 'c2',
      component: () => import('../components/homeChild2.vue'),
      meta: {
        title: '孩子2'
      }
    }]
  },
  {
    path: "/abort",
    component: () => import('../components/about.vue'),
    meta: {
      title: '关于'
    }
  },
  {
    path: "/user/:id",
    component: () => import('../components/User.vue'),
    meta: {
      title: '用户'
    }
  },
  {
    path: '/profile',
    component: Profile,
    meta: {
      title: 'Profile'
    }
  }

];
//创建一个router对象
const router = new Router({
  routes,
  mode: "history",
  linkActiveClass: "active"
})
//这个是前置钩子
router.beforeEach((to, from, next) => {
  document.title = to.matched[0].meta.title;
  next();
})

6.8 Keep-alive

内置的Vue组件,可以使被包含的组件保留状态,或者避免重新渲染,router-view是一个组件,如果直接包在keep-alive里面,所有路径匹配的视图都会被加入到缓存里面这样就会让组件不会被频发的创建以及频繁的销毁

在APP.vue里面

	<keep-alive>
        <router-view></router-view>
    </keep-alive>

在home.vue里面检测什么时候组件被创建,什么时候被销毁

activated() {
    console.log("被创建");
  },
  deactivated() {
    console.log("被销毁");
  },

两个方法 include与exclude,指定包含的组件被缓存,指定那些组件不被缓存

<keep-alive exclude="Profile,User">
        <router-view></router-view>
      </keep-alive>