如何解决访问对应路径时,Vue路由器未显示组件
路由器无法正常工作。看起来很正常
应用运行于:
- 本地:http:// localhost:8080 /
但是看来路由器看不到组件((
我的路由器
import Vue from 'vue'
import VueRouter from 'vue-router'
import Web from '@/views/Web.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/web',name: 'Web',component: Web
},{
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: function () {
return import(/* webpackChunkName: "about" */ '../views/About.vue')
}
}
]
const router = new VueRouter({
routes
})
export default router
我的组件:
<template>
<h1>Hello</h1>
</template>
<script>
export default {
name: 'Web'
}
</script>
我的错误:
App running at:
- Local: http://localhost:8080/
但是什么也没发生(
那会是什么?
我的package.json中可能需要一些依赖吗?
{
"name": "osprey","version": "0.1.0","private": true,"scripts": {
"serve": "vue-cli-service serve ","build": "vue-cli-service build"
},"dependencies": {
"autoprefixer": "^9.8.6","live-server": "^1.2.1","vue": "^2.6.11","vue-router": "^3.2.0","vuex": "^3.4.0"
},"devDependencies": {
"@vue/cli-plugin-router": "~4.4.0","@vue/cli-plugin-vuex": "~4.4.0","@vue/cli-service": "~4.4.0","node-sass": "^4.9.0","sass-loader": "^7.0.1","vue-template-compiler": "^2.5.17"
}
}
还是我的vue.config.json中的内容?
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/_variables.scss";`
}
}
}
};
解决方法
将模式历史记录添加到路由器配置中,如下所示:
const router = new VueRouter({
mode:'history',routes
})
以访问/web
之类的路径,但由于默认模式为哈希,因此必须使用#/web
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。