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

最新推荐文章于 2024-09-12 23:24:14 发布

原创

最新推荐文章于 2024-09-12 23:24:14 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

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

实现效果：点击导航栏的不同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>
                </ul>
                <el-button type="primary" icon="el-icon-edit" @click="toWrite()">写文章</el-button>
                <p class="searchInp">