router-view使网页的某部分根据不同的URL渲染内容

影已落流水

于 2019-12-25 15:44:23 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/StillWaters_ing/article/details/103699978

通过Vue.js的router-view组件，结合路由配置，实现在点击导航栏时改变URL，但只更新网页特定区域的内容。主要步骤包括：设置首页的main部分为router-view，配置router文件夹下的index.js以定义路由，创建HomePage、MoodStory、StudyRecord等多个待跳转的Vue组件，并为FirstPage页面的li元素添加点击事件以触发路由切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果：点击导航栏的不同li，改变网页url，但网页只有部分会被渲染

1、首页（FirstPage）main部分使用router-view

<template>
  <div class="firstpage">
        <el-container>
            <el-header class="clearfix" style="line-height:60px;">
                <p class="logo">
                <img src="../assets/logo.png"/>
                </p>
                <ul class="navbar">
                    <li class="navbar-item" v-for="item in navdata" :key="item.id">
                        <a :href="'#fp/'+item.url" @click="changePage(item.url)">{
  {item.msg}}</a>
                    </li>