13. vue2 简单路由的使用

一、 如何配置路由

vue 中提供了 vue-router 组件来配置路由

1.1 安装 vue-router 组件

npm install vue-router  --save 

1.2 在 main.js 中引入并 Vue.use(VueRouter)

import VueRouter from 'vue-router'
Vue.use(VueRouter)

1.3 配置路由

import Home from "./components/Home.vue";
import News from "./components/News.vue";

const routes = [
  { path: "/home", component: Home },
  { path: "/news", component: News },

  { path: "*", redirect: "/home" } /*默认跳转路由*/,
];

1.4 实例化 VueRouter

const router = new VueRouter({
	routes // （缩写）相当于 routes: routes
})

1.5 挂载

new Vue({
	el: '#app',
	router，
	render: h => h(App)
})

1.6 在要渲染的位置加上

<router-view></router-view> 

1.7 示例

1.7.1 main.js

import Vue from "vue";
import VueRouter from "vue-router";
import App from "./App.vue";

Vue.use(VueRouter);

//1.创建组件

import Home from "./components/Home.vue";
import News from "./components/News.vue";

//2.配置路由   注意：名字

const routes = [
  { path: "/home", component: Home },
  { path: "/news", component: News },

  { path: "*", redirect: "/home" } /*默认跳转路由*/,
];

//3.实例化VueRouter  注意：名字

const router = new VueRouter({
  routes, // （缩写）相当于 routes: routes
});

//4、挂载路由

new Vue({
  el: "#app",
  router,
  render: (h) => h(App),
});

//5 <router-view></router-view> 放在 App.vue

1.7.2 App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/news">新闻</router-link>

    <hr />

    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "你好vue",
    };
  },
};
</script>
<style lang="scss"></style>

二、 如何进行路由跳转

2.1 利用 router-link

<router-link to="/home">首页</router-link>
<router-link :to="'/home/' + id">首页</router-link>

2.2 编程式导航

// 字符串路径
this.$router.push('/users/eduardo')

// 带有路径的对象
this.$router.push({ path: '/users/eduardo' })

// 命名的路由，并加上参数，让路由建立 url
this.$router.push({ name: 'user', params: { username: 'eduardo' } })

// 带查询参数，结果是 /register?plan=private
this.$router.push({ path: '/register', query: { plan: 'private' } })

// 带 hash，结果是 /about#team
this.$router.push({ path: '/about', hash: '#team' })

如果提供了 path，params 会被忽略，上述例子中的 query 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path ：

const username = 'eduardo'
// 我们可以手动建立 url，但我们必须自己处理编码
this.$router.push(`/user/${username}`) // -> /user/eduardo
// 同样
this.$router.push({ path: `/user/${username}` }) // -> /user/eduardo
// 如果可能的话，使用 `name` 和 `params` 从自动 URL 编码中获益
this.$router.push({ name: 'user', params: { username } }) // -> /user/eduardo
// `params` 不能与 `path` 一起使用
this.$router.push({ path: '/user', params: { username } }) // -> /user

三、 路由嵌套

3.1 配置路由

const routes = [
  {
    path: "/user",
    component: User,
    children: [
      { path: "useradd", component: UserAdd },

      { path: "userlist", component: UserList },
    ],
  }
];

3.2 父路由里面配置子路由显示的地方

在上面例子中需要在父路由组件 User 放置 <router-view></router-view> 以供子路由组件 UserAdd | UserList 显示。

四. 动态路由

4.1 配置动态路由

routes: [
  // 动态路径参数 以冒号开头
  { path: '/user/:id', component: User }
]

4.2 在对应的页面获取动态路由的值

this.$route.params

五. get 传参

5.1 get 传参

<router-link :to="'/pcontent?id='+key">get 传参</router-link>

5.2 在对应的页面获取 get 传参

this.$route.query