vue--路由安装使用2---（$route和$router）

vue路由

npm i vue-router # 安装路由插件

当我们使用了路由组件之后【即 Vue.use(VueRouter)】会自动的注册两个全局组件到项目中

router-link,是用来生成a标签的组件，做页面跳转

router-view，是用来展示路由对应的内容的组件，所有的路由地址访问时对应的内容都在组件范围内显示

使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
    routes: [....] // 定义一个路由内容
})

new Vue({
  router, // router: router
  render: h => h(App)
}).$mount('#app')

每一个路由对应的页面中都会包含一些路由属性

• $route

  表示当前的路由信息，有path，params，query等参数信息

• $router

  是一个vue的路由对象，里面包含有一个路由的常见方法，比如push，replace，add等

$route的传参      
this.$router.push({name:'查看主题',params:{themerow:row}})
调用参数
{{$route.params.themerow.applyUserNm}}

$route

先安装命令 npm i vue-router
然后在main.js文件中进行添加 如下图

npm run build → 生成更新dist目录
npm run serve → 执行运行 跟随链接localhost:8080或者 在dist目录里双击打开index.html页面

main.js

import Vue from "vue";
import VueRouter from "vue-router"; // 从vue文件夹下面的router中引入，
import App from "./App.vue";
// 1️⃣方法一
import Home from "./pages/Home";

Vue.config.productionTip = false;
Vue.use(VueRouter); // 使用路由,会帮我们在页面中自定义两个组件，全局注册的，一个是router-link，使用来生成a标签的，一个是router-view，是用来展示组建的内容的，路由所有对应的内容都是在router-view里面展示的，路由跳转之后的组件页面内容都在此处进行展示

// 定义一个路由实例
const router = new VueRouter({
  // routes:[...]表示路由配置表
  routes: [
    {
      path: "/", // 路径，就是url中访问的地址
      name: "H", // 名字，就是我为这个路由设置一个名字
      // 1️⃣方法一
      component: Home, // 组件，当浏览器中访问对应的地址时展示的内容
    },
    {
      path: "/list",
      name: "L",
      // 异步方式引入的路由组件会在打包的时候生成单独的js文件
      //  在使用的时候才会被加载
      //  此方法主要用来做性能优化
      // 2️⃣方法二
      component: () => import("./pages/List"), // 异步引入路由,当访问到此地址的时候才会引入文件
    },
  ],
});

new Vue({
  router, // router: router
  render: (h) => h(App),
}).$mount("#app");

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- 是路由中的内置组件，用来生成a标签 -->
    <router-link :to="{name: 'H'}">【首页】</router-link>
    <router-link :to="{name: 'L'}">【列表】</router-link>
    <hr />
    <!-- 是用来展示组件的内容的. 路由跳转之后的组件页面内容都在此处进行展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/pages/List.vue和Home.vue

自己创建的