（声明式导航）利用a标签点击文字跳转到相应的路径（页面）

原创已于 2022-07-25 16:21:05 修改 · 670 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

于 2022-07-25 16:09:07 首次发布

vue实战专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用声明式导航，通过<a>标签实现根组件间页面的无痛切换，重点讲解了利用<router-view>组件进行内容渲染的方法。

a链接的跳转方式称为声明式导航
我这里是直接写在根组件中的,
点击文字会跳转到相应的页面

<template>
  <div id="app">
    根组件
    <ul>
      <li>
        <a href="/#/films">电影</a>  <!--不需要加上端口和域名-->
      </li>
      <li>
        <a href="/#/cinemas">影院</a>
      </li>
      <li>
        <a href="/#/active">票价</a>
      </li>
      <li>
        <a href="/#/center">我的</a>
      </li>
    </ul>
    <!--路由容器：根据路径把组件内容渲染到页面中-->
    <router-view></router-view>
  </div>
</template>

这里利用了location.href
在这里插入图片描述