vue-router 使用

vue-router主要是前端路由，做spa应用使用的。
可以使用location.hash history.pushstatus history.back history.go来操作浏览器当前url不重新请求资源

使用vue-router三个步骤：

1.导入vue对象 (router文件夹创建index.js)

//配置路由
import VueRouter from "vue-router";
import Vue from 'vue'

// 1.通过vue.use安装、使用
Vue.use(VueRouter)

// 2.创建VueRouter对象

//配置路径和组件的嵌套关系
const routes = [
    {
      path:'',
      redirect:'/home'//重定向到
    },
    {
        path:'/home',
        component:Home
    },
    {
        path:'/about',
        component:About
    }
]

const router = new VueRouter({
    routes,//这个变量名很关键
    mode:'history'
})

// 3.导出 去main.js挂载router对象
export default router

使用的时候

显示页面 <router-view></router-view>
<router-link to="/about">关于</router-link>默认是a标签，tag可以改属性，活跃态的时候一般是router-link-active，可以改这个属性名。

使用this.$router.push(url)做代码跳转

动态路由。

{
    path:'/user/:userId'//这个地方起什么名字，后面$route.params.userId 就对应名称去拿属性
    component:User
}
<router-link v-bind:to="'/user/'+userName">user</router-link>
userName就是动态绑定到to属性里

$router,传给vue的router对象，包括所有的路由对象及其他配置。
$route，当前活跃的路由对象。

路由的懒加载，不直接import对象

const Home = ()=> import('../components/home')

路由的嵌套

{
    path:'/home',
    component:Home,
    children:[ //嵌套
        {
          path:'',
          redirect:'messages'
        },
        {
          path:'news',// 这个地方不加/
          meta:{  //可以加入数据，使用路由导航守卫的时候可以拿到属性值
          },
          component:Hnews
        },
        {
            path: 'messages',
            component:HMessage
        }
    ]
}
使用的时候要写完整地址
<router-link to="/home/messages">message</router-link>

路由传递数据的三种方式

router-link调用传值.png 方法实现.png

声明周期函数

created() {},destroyed() {} 等等

路由导航守卫

有全局的，有单个vue组件的守卫，用来监听创建销毁过程中的事件
keep-alive让路由页面保持活跃态，在

<keep-alive exclude="Profile(vue组件name)">
      <router-view></router-view>
</keep-alive>
 里面可以通过activated() {},deactivated() {}监听