vue router

前端路由的核心是什么呢？
改变url，但是页面不进行整体的刷新。

1. 利用url 的hash
   location.hash = ‘qqwe’
   2.html5新增的history模式： pushState
   这种方式类似于向栈里添加数据
   history.pushState({ data }, ’ title’, 'url ')
   history.back() //出栈

3.replaceState
history.replaceState({ data }, ’ title’, ‘url ‘)
这种方式后不能返回！
4… history.go(-1) = history.back()
history.go(1)= history.forward()
history.pushState({},’’,‘qwe’)
undefined
history.pushState({},’’,‘1’)
undefined
history.pushState({},’’,‘2’)
undefined
history.pushState({},’’,‘3’)
undefined
history.pushState({},’’,‘4’)
undefined
history.go(-1)
undefined
history.go(-3)
undefined

使用vue-router

在index.js 里配置路由相关信息

1.import VueRouter from ‘vue-router’ 导入vuerouter
2. 通过vue。use插件 安装插件
3. 配置路由和组件之间的应对关系
4.将router对象传出到vue实例中

import Vue from 'vue' 第三
import VueRouter from 'vue-router'  第一步
// 1.通过vue.use(插件)，安装插件
Vue.use(VueRouter)    第二步

// 2.创建vuerouter对象 
 const routes = [   第五

 ]
const router = new VueRouter({   第四
  routes     本来是   routes ： routes 简写为routes
})
// 3.将router对象传出到vue实例中
  export default router  第六

第一步创建路由组件

<template>
  <div>
      <h1>hu</h1>
  </div>
</template>

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

<style>

</style>``

第二步，配置路由映射 : 组件和路径映射之间的关系

使用前别忘了先导入组件

import Home from '../components/Home'
import You from '../components/You'

const routes = [
   {
    path: '/home',
    components: Home
   },
   {
    path: '/about',
    components: You
   }

]

接下来就是使用路由，

router-view 里显示

重定向！ 让用户进入界面时就显示这个路由组件
redirect :

利用history 改变路劲改变模式

在前面的

router-link 的to属性用于指定跳转路径
router-link 默认渲染成a标签
tag属性可以渲染成其他属性 tag= ‘li’

在router-link中添加一个 replace 不需要写其他的了 即不能返回
用法

<router-link to='/home' replace tag='button'> h ome</router-link>

在配置路由的属性里有一个 LinkActiveClass ：‘ name ’
可以同意修改动态活跃时的class名字

通过代码跳转路由

1.先监听函数
2.函数方法为
tohome（） {
this.$router.push(’/home’)
// huozhe this.

$

router.replace(’/home’)‘’
}

动态路由

<router-link v-bind:to="'/home'+userid" replace tag='button'> h ome</router-link>

这里的userid是下面动态获取的数据

如何在页面中显示动态获取的数据呢？

route拿到的是处于活跃状态的路由

路由懒加载

const Home = () => import('../components/Home.vue')
const You = () => import('../components/You.vue')
const Use = () => import('../components/Use.vue')
Vue.use(VueRouter)


  const routes = [
    {
      path: '',
      // name: 'Home',
      redirect:'home'
    },
  {
    path: '/home',
    // name: 'Home',
    component: Home
  },

路由嵌套

 {
    path: '/home',
    component: Home,
    meta: {
       title: 'shouye'
     },
    children: [
      {
        path: '',
        redirect: 'news'
      },
      {
        path:'news' ,// 不用加 /
        component: HomeNews,
        // meta: {
        //   title: 'shouye'
        // },
      },
      {
        path:'qwe' ,// 不用加 /
        component: Qwe,
        // meta: {
        //   title: 'shouye'
        // },
      }
    ]
  },``

下一步在组件内部使用router-link标签
同时使用router-view显示内容

<router-link to='/home/news'>asdad</router-link>
        <router-link to='/home/qwe'>2d</router-link>
    <router-view></router-view>
    

参数传递

    <router-link :to="{path : '/profile',query: {name: 'qwe',age:19,height:1.88} }">dangan </router-link>

方式1

方式2

获取参数

导航守卫

  document.title = to.matched[0].meta.title

为了记录上一次离开的位置

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

 activated() {   //这个函数只有在使用了keep-alive包裹了才有效
        this.$router.push(this.path)
       console.log('huoue');
     },
  beforeRouteLeave(to,from,next) {
       console.log(this.$route.path);
       this.path=this.$route.path;
       next()
     }