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='https://www.haobala.com/wenda/{{ asset(’css/app.css’) }}'></head><body> <p id='app'></p> <!--scripts--> <script src='https://www.haobala.com/wenda/{{ 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> <p id='app'><h1>hello world</h1><router-view></router-view> </p></template>
login.vue:
<template> <p>loginpage</p></template>
问题解答
回答1：你哪里有配置是 首页是 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 会始终显示的
回答2：没有看到你的login路由在哪里，路由的话<router-view></router-view>间的视图会跳，但外面的内容还是保留的。
回答3：{ path: ’homepage’, component: Home}应该是{ path: ’/homepage’, component: Home}
相关文章：
1. python - Django中如何使用异步2. java - 为什么spring的提交格式有些不一样?3. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题4. python - pyspider的分布式运行成功，2台slave跑，但是时间并没有缩短问题？5. ，我写的代码哪里出错了？为什么就是显示不出来peter？6. docker不显示端口映射呢？7. vim - YouCompleteMe 怎么自动补全css属性和属性值？8. javascript - iview 打包之后 找不到自带的icon图片，而且路径重复，点解9. node.js - session怎么存到cookie，然后服务器重启后还能获取。数据库不用mongodb或redis，数据库是mysql10. node.js - mysql如何通过knex查询今天和七天内的汇总数据
网公网安备