day0607

最新推荐文章于 2023-08-16 16:10:29 发布

pika521197

最新推荐文章于 2023-08-16 16:10:29 发布

阅读量49

点赞数

分类专栏： qianfeng

本文链接：https://blog.csdn.net/qq_46008442/article/details/117660253

版权

qianfeng 专栏收录该内容

105 篇文章 1 订阅

订阅专栏

day0607

路由

路由基础

单页面应用spa必备

在这里插入图片描述

引用路由插件

起步

在这里插入图片描述

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

JavaScript

在这里插入图片描述

// Home.vue
export default {
  computed: {
    username() {
      // 我们很快就会看到 `params` 是什么
      return this.$route.params.username
    }
  },
  methods: {
    goBack() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    }
  }
}