vue的路由

开发步骤

1. 编写组件
2. 在index中配置该组件的name，和path等

作用：

用于组件的切换。

组件切换方法：

一、标签(在temlate中直接使用)

点击该标签就可以实现跳转

• \<router-link\>

  该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.

• \<router-view\> 显示组件的

  该标签会根据当前的路径, 动态渲染出不同的组件.

 无参数的跳转

<template>
  <nav>
<--replace代表跳转之后不可以返回 -->
    <router-link to="/home">Home</router-link> |
    <router-link replace to="/about">About</router-link>
  </nav>
  <!--路由组件容器,不同地址对下的组件在这里渲染-->
  <router-view/>
</template>

带参数跳转

<router-link :to="{name:'User',query:{id:1,name:'zs'}}">user</router-link>
<router-link :to="{path:'/user',query:{id:1,name:'zs'}}">user</router-link>
<--to中第一个键值对代表组件地址，或者名字；第二个键值对是参数。key是query -->

 二、router.push(path)，router.peplace(path).(在方法中使用)。

给某个标签绑定点击事件，就可以点击该标签实现跳转

无参数的跳转和带参数的跳转

  methods:{
    login:function () {
      if(this.loginName=="root"&&this.password=="root"){
        //router.push("/");//不带参数的跳转
        this.$router.push({
          name:"home",         // path:"/home",这里也可以用name
          query:{
            loginName:"root",
          }
        })
        sessionStorage.setItem("loginName","root");
      }else{
        alert("账号或者密码错误！")
      }

    }
  }

获取参数

方法一：(在temlate中直接使用)

  {{$route.query.id}}
  {{$route.query.name}}

方法二：在<script>中

  created() {
    //获取动态路由参数
    this.id = this.$route.query.id;
    this.name = this.$route.query.name;
  },

守卫路由：

• vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

//用来监听路由的跳转，可以做登录判断。to：要跳转到的路由；from；从什么路由发起。next，放行。
router.beforeEach((to,from,next)=>{
  if(to.path=="/login"||to.name=="login"){
    next();
  }else{
    let loginName;
    loginName = sessionStorage.getItem("loginName");
    if(loginName=="root")
    {
      next();
    }else{
     router.replace("/login")
    }

  }
})

组件的嵌套

在某个组件中嵌套组件，点击不会跳转。在index.js中的一个组件路由中添加一个参数

 children:[
      {
        name:"student",
        path:"/about/student",
        component: () => import(/* webpackChunkName: "about" */ '../views/StudentView.vue'),
      },
      {
        name:"user",
        path:"/about/user",
        component: () => import(/* webpackChunkName: "about" */ '../views/UserView.vue'),
      },
    ]

$router和$route的区别

router:index.js中的所有路由组件。（一般用来组件的跳转）

router:当前的路由。（用来获取参数）