通过代码格式跳转路由：

使用this.$router.push(‘跳转路由‘)

<script>
export default {
    name: "App",
    methods: {
      homeClick(){
        //通过代码的方式修改vue-router
        this.$router.push(‘/home‘)
        console.log(‘homeclick‘)
      },
      aboutClick(){
        this.$router.push(‘/about‘)
        console.log(‘aboutclick‘)
      }
    }
}
</script>

动态路由的使用：

• 通过动态绑定：v-bind的方法，路由跳转的时候在路径上拼接上Id

路由配置：

route:[
  {
    path: "/user/:id",
    component: User
  }
] 

渲染界面路由的动态绑定：（用字符串拼接方法填写路径）

 <router-link :to="‘/user/‘+id">用户</router-link>

现在有一个需求，如果渲染界面的路由跳转到用户界面并在路径显示了渲染界面里的id数据，那么渲染组件中如何再在界面上返回我们需要的在渲染界面下的用户id数据呢？

$router:获取当前整个路由对象

$route：获取当前活跃路由（界面显示的组件对应的路由）

在User组件下定义computed获取当前活跃路由获取到的id参数：

<template>
  <div>
      <h2>我是用户界面</h2>
      <p>我是用户界面内容</p>
      <p>userId: {{userId}}</p>
      <!--<p>{{$route.params.id}}</p>-->
  </div>
</template>

<script>
export default {
    name: "User",
    computed: {
      userId(){
        return this.$route.params.id
      }
    }
}
</script>

Vue-router懒加载的使用

• 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块
• 只有在这个路由被访问到的时候，才加载对应的组件

const Home = () => import("../components/Home.vue");
const About = () => import("../components/About.vue");
const User = () => import("../components/User.vue");

Vue.use(VueRouter);

const routes = [
  { path: ‘/‘,
  //重定向,页面初始定位到Home组件
    redirect:  ‘/home‘
  },

  {
    path: "/home",
    component: Home
  },
  {
    path: "/about",
    component: About
  },
  {
    path: "/user/:id",
    component: User
  }
];

Vue-router路由的嵌套:

嵌套路由是一个很常见的功能：

• 比如在home页面中，我们希望通过home/news和/home/message访问一些内容
• 一个路由映射一个组件，访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

• 创建对应的子组件，并且在路由映射中配置对应的子路由
• 在组件内部使用标签

Vue-router参数传递：

参数传递主要有两种类型：

• params类型：

• 配置路由格式：/route/：id
• 传递的方式：在path后面接上对应的值
• 传递后形成的路径：/route/123 /route/abc

路由显示里传参方式：

<!--id为当前组件下数据-->
<router-link :to="‘/user/‘+id">用户</router-link>

路由映射组件内获取数据：

<p>userId: {{$route.params.id}}</p>

URL => 协议：//主机：端口/路径?查询

? scheme://host:port/path?query#fragment

• query类型：

• 配置路由格式：/route，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/route？id=123, /route？id=abc

路由显示里传参方式：

<router-link :to="{ path:‘/profile‘, query:{name: ‘豆豆‘, height: ‘180‘, age: ‘21‘}}">

路由映射组件内获取数据：

<p>姓名:{{$route.query.name}}</p>