javascript - vue-router怎么不能实现跳转呢
本文介绍了javascript - vue-router怎么不能实现跳转呢的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
根据文档的例子试了一下vue-router用在项目中，一进入首页的路径是test.administer/index，但是根据路由配置，不是应该进入首页后跳转到Login.vue这个组件的内容吗？我根据以下的配置，当前进入首页后，显示的是App.vue里面的内容。。
index.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1</title>
<!--styles-->
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
<div id="app"></div>
<!--scripts-->
<script src="{{ asset('js/main.js') }}"></script>
</body>
</html>main.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(VueRouter)
Vue.use(ElementUI)
Vue.use(VueResource)
import App from './App.vue'
import Home from'./components/Home.vue'
import Login from'./components/Login.vue'
const router = new VueRouter({
routes:[
{ path: '/index', component: Login,
children: [
{ path: 'homepage', component: Home}
]
}
]
})
new Vue(Vue.util.extend({ router },App)).$mount('#app')App.vue:
<template>
<div id="app">
<h1>hello world</h1>
<router-view></router-view>
</div>
</template>login.vue:
<template>
<div>loginpage</div>
</template>解决方案
你哪里有配置是 首页是 Login component 组件嘛
默认需要 /
routes:[
{ path: '/', component: Login,
children: [
{ path: 'homepage', component: Home}
]
}
]如果你配置成 /index
那么对应网址是
test.administer/index/#/index
test.administer/index/#/index/homepage
另外 app.vue 里面的 hello world 会始终显示的
这篇关于javascript - vue-router怎么不能实现跳转呢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
