前端开发系列049-基础篇之VueRouter

VueRouter 路由

• MPA(多)页面应用 (Multiple Page Application)
• SPA(单)页面应用 (Single Page Application) 项目打包后最终只有index.html单个页面文件

一、VueRouter作用(一)

在单页面应用中，配置路由后，能够通过不同的url路径来实现显示不同的组件内容。

1、项目中下载和安装vue-router       `$ npm i vue-router -d`
2、项目中的main.js文件中引入路由模块 `import VueRouter from "vue-router"`
3、使用(安装)Vue-router插件        `Vue.use(VueRouter);`
4、配置路由信息                    `关键参数:mode和routes:[]`
5、注入路由到Vue实例对象
6、在App.vue中需要显示组件内容的位置通过<router-view/>来进行占位(替换的部分)

代码示例

/* # main.js文件内容 */
import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"

import A from "./components/A"
import B from "./components/B"
import C from "./components/C"
Vue.use(VueRouter);
const router = new VueRouter({
    mode: "hash",
    routes: [{
            path: "/a",
            component: A
        },
        {
            path: "/b",
            component: B
        },
        {
            path: "/c",
            component: C
        }, {
            path: "/",
            redirect: "/c" /* 重定向 */
        },
        {
            path: "*",
            redirect: "/404" /* 重定向到404页面 */
        }
    ]
});
new Vue({
    router,
    render: h => h(App),
}).$mount('#app')

/* # app.vue文件内容 */
<template>
  <div>
    <!-- 访问路由：当访问页面的时候显示指定的静态页面 -->
    <!-- index.html |  home.html | login.html 等 -->
     <router-view></router-view>
     <hr>
    <div>A页面</div>
    <div>B页面</div>
    <div>C页面</div>
  </div>
</template>

二、VueRouter作用(二)

通过<router-link>组件的使用实现点击标签跳转的动作(可以理解为当点击标签的时候，修改了当前页面的URL地址，然后根据URL地址来切换显示对应的内容)。

第一种跳转的方式:通过组件

<template>
  <div id="app">
    <!-- 访问路由：当访问页面的时候显示指定的静态页面 -->
    <!-- index.html |  home.html ÷Ú：：：：；。| login.html 等 -->
     <router-view></router-view>
     <hr>
      <div v-for="item in menus" :key="item.content">
        <router-link :to="item.path" :tag="'span'" replace active-class="current">{{item.content}}</router-link>
      </div>

  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return  {
      menus:[{
        content:"A页面",
        path:"/a"
      },{
        content:"B页面",
        path:"/b"
      },{
        content:"C页面",
        path:"/c"
      }]
    }
  },
  components: {
  }
}
</script>

<style scoped>
  .current{
    font-weight: bold;
    color: red
  }
</style>

<router-link>组件的主要参数：

    :to  跳转的目标
    :tag 修改渲染后标签的类型
    :active-class  设置当前导航的选中状态(样式)

第二种跳转的方式:通过this.$router.push()调用函数来实现

<button @click="clickHandler2C">跳转到C页面</button>
 clickHandler2C(){
     /* 1.通过params来传递参数 */
      /* 在C页面刷新，那么数据就不再了 */
      /* 1-1  name + params 成功*/
      // this.$router.push({name:"c123",params:{userID:this.id}});

      /* 错误的演示 下面这行代码无法传递参数 */
      /* 注意：如果提供了 path，params 会被忽略 */
      // this.$router.push({path:"/c",params:{userID:this.id}});

      /* 2.通过query来传递参数 */
      /* 在C页面刷新，数据仍然存在 */
      /* 2-1 */
      // this.$router.push({name:"c123",query:{userID:this.id}});
      /* 2-2 */
      //  this.$router.push({path:"/c",query:{userID:this.id}});
 }

三、VueRouter路由参数的传递

① 通过this.$router.push() 方法来传递参数

    this.$router.push({name:"c123",params:{userID:this.id}});
    this.$router.push({name:"c123",query:{userID:this.id}});
    this.$router.push({path:"/c",query:{userID:this.id}});
    query和params的区别在于，当目标页面刷新时，参数是否还存在。

② 动态参数传递

    * mode history
    * path  "/d/:id"
    * url   http://localhost:8081/d/234534786  + this.$route.params.id;

    注意:如果mode为hash的话，貌似无法实现动态参数的传递