关于Vue2项目使用router-view引入静态html导致在网址栏输入网址无法跳转到对应页面的问题
是这样的,我在自学Vue2+springboot2做一个前后端分离的新闻发布系统,想用别的学校的新闻首页模版显示新闻,所以我下载了该学校的官网的html文件和里面的一些图片样式和js文件.
然后我将下载好的文件全都放入Vue2项目的public文件夹下:
通过在views文件夹下的HomePage.vue将public下的index.html引入到HomePage.vue中显示:
<template>
<div style="width: 100%; height: 100vh;">
<router-view :src="src" />
</div>
</template>
<script>
export default {
name: 'HomePage',
data() {
return {
src: ''
}
},
mounted() {
this.src = `../../public/index.html`
}
}
</script>
这是我的路由设置:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
component: () => import('../views/HomePage.vue'),
redirect: '/home',
children:[
{
path: 'home',
name: '首页',
component: () => import('../views/HomePage.vue')
},
{
path: 'searchnews',
name: '搜索新闻',
component: () => import('../views/SearchNews.vue')
}
]
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
},
{
path: '/searchnews',
name: 'SearchNews',
component: () => import('../views/SearchNews.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
然后在浏览器输入localhost:8080展示出了这个页面
我看引入成功后我想跳到别的页面去看一下,于是输入了localhost:8080/searchnews结果它并没有跳转,反而一直停在这个首页了.
这到底是为什么啊?网上什么都查不到原因
