Vue路由基础

两种引入路由组件的方式和区别

第一种
import Home from './../views/Home.vue'
{
    path: '/',
    component: Home
},
第二种
{
    path: '/about',
    component: () => import('./../views/About.vue')
}

区别：
第二种方式起到了懒加载的作用，

重定向

把当前访问的路径，重定向到另一个位置

{
  path: '/main',
  <!-- 方式一：命名路由的方式 -->
  redirect: {
    name: 'home'
  }

  <!-- 方式二： -->
  redirect: to => {
    return {
      name: 'home'
    }  
  }

  <!-- 方式三： -->
  redirect: to => {
    return '/' 
  }
  
  <!-- 方式四： -->
  redirect: to=>'/'
  
  <!-- 方法五： -->
  redirect: "/"
},

命名路由与别名

{
  path: '/',
  name: "home",       // 命名路由
  alias: 'home_page', // 别名，指的是home_page和home这两个名字指向的是同一个页面
  component: Home,
},

动态路由

定义动态路由

{
  path: '/argu/:name',  // 动态路由
  name: 'argu',         // 命名路由
  component: ()=>import('@/views/Argu.vue'),
}

获取动态路由的参数

{{ $route.params.name }}
$route：当前加载页面的路由对象

动态路由的作用

起到了页面复用的作用

嵌套路由

{
  path: '/parent', 
  name: 'parent',
  component: ()=> import('@/views/Parent.vue'),
  children: [
    {
      <!-- 第一个子路由 -->
      // 子嵌套路由会自动补全斜线，所以不需要添加斜线
      path: 'child',
      component: () => import("@/views/Child.vue")
    },{
      <!-- 第二个子路由 -->
    }
  ]
}

http://localhost:8080/#/parent/child

命名视图

有时候想展示多个视图，而不是嵌套展示。

<!-- 默认的是default -->
<router-view />
<router-view name="email"/>
<router-view name="tel"/>
{
  // 命名视图
  path: '/named_view',
  // 这里有s，代表多个组件
  components: {
    default: () => import("@/views/Child.vue"),
    email: () => import("@/views/Email.vue"),
    tel: ()=> import("@/views/Tel.vue")
  }
}

路由如何展示到页面上

<!-- 路径方式 -->
<router-link to="/">Home</router-link>

<!-- 命名路由的方法，此方法必须给路由命名 -->
<router-link :to="{ name: 'about' }">About</router-link>
或者
<router-link v-bind:to="{ name: 'about' }">About</router-link>

<router-link :to="about">About</router-link>

<!-- 命名的路由 -->
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

<!-- 带查询参数，下面的结果为 /register?plan=private -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

编程式的导航

js操作路由

1、返回上一页

第一种方式
this.$router.back();
第二种方式
this.$router.go(-1);

前进一页

this.$router.go(1)

跳转到某个页面

方法一：路径方法
this.$router.push("/parent")

方法二：命名路由的方法
this.$router.push({
    name: 'parent'
})

// 也可以在参数中添加一些信息
this.$router.push({
  // 参数（查询信息）
  name: "parent",
  query: {
    name: 'fujingwen'
  }

  // 或者
  // 参数
  name: 'argu',
  params: {
    name: "fujingwen"
  }

  // 或者（ES6的模板语法）
  path: `/argu/${name}`
})

3、替换到某个路由

this.$router.replace({
  name: "parent"
})

跳转与替换的区别：
replace：
当使用push时，会在浏览历史留下记录
replace的话，浏览历史会被替换，不会留下以前的记录