vue.js - vue router 路由组件不显示
本文介绍了vue.js - vue router 路由组件不显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
刚学vue试试路由跳转页不显示 不知道哪里问题 求教大神
项目结构
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vueaaa</title>
<script src="app/index.js"></script>
</head>
<body>
<div id="header">
</div>
<div id="leftNav">
<div id="app1">
<ul>
<li>
<router-link to="/bfjh">a</router-link>
</li>
<li>
<router-link to="/spgl">b</router-link>
</li>
<li></li>
<li></li>
</ul>
<!-- <tree></tree>-->
</div>
</div>
<div id="content">
<router-view></router-view>
</div>
<!-- built files will be auto injected -->
</body>
</html>index.js
import Vue from 'vue'
import elementUI from 'element-ui'
require("../app/index.css");
import 'element-ui/lib/theme-default/index.css'
import tree from '../components/tree'
import router from '../router';
Vue.use(elementUI)
var app1 = new Vue({
el: '#app1',
components: {
tree
},
router
})router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import viewA from '../components/viewA'
import viewB from '../components/viewB'
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{
path: '/bfjh',
component: viewA
},
{
path: '/spgl',
component: viewB
}
]
}); //这里可以带有路由器的配置参数
export default router; //将路由器导出viewA.vue
<template>
<p>this is view A</p>
</template>配置文件
var path = require('path')
var utils = require('./utils')
var config = require('../config')
var vueLoaderConfig = require('./vue-loader.conf')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
entry: {
app: './app/index.js'
},
output: {
path: config.build.assetsRoot,
filename: '[name].js',
publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath
},
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
}
},
module: {
rules: [
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: "pre",
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src'), resolve('test')]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
]
}
}
解决方案
说实话，看了半天没看出哪里有问题……
感觉应该是router模块那块的问题，按你写的我也弄了个demo正常工作。
你多放几张浏览器的截图包括console的，或者把源码共享出来，分析下。
这篇关于vue.js - vue router 路由组件不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
