不能让路由器工作 [英] Cant make router work
问题描述
这是我的路由器/index.js
从'vue'导入Vue从vue-router"导入路由器从../views/Home"导入主页从../views/Login"导入登录Vue.use(路由器)导出默认的新路由器({//模式:'哈希'，路线:[{小路: '/'，组件:首页},{路径:'/登录'，组件:登录},]})这是我的登录视图
<div class="page"><p>登录</p></模板><脚本>导出默认{成分: { }}
但是我浏览到的任何地方，http://127.0.0.1:4000/login
这是我的 app.js
从'vue'导入Vue从'vuex-router-sync'导入{同步}从'./components/App'导入应用程序从'./router'导入路由器从./store"导入商店同步(商店，路由器)const app = new Vue({路由器，店铺，...应用程序})出口{应用程序，路由器，商店}我用
运行开发服务器npm run dev如果我修改主页模板，我会看到更改，但路由似乎不适用于/login 或其他视图.
在你的主要组件(App.vue):
<!-- App.vue页面的html元素--><!-- 路由器组件--><路由器视图></路由器视图></模板>并在路由器中指定历史模式:
导出默认的新路由器({模式:'历史'，路线:[...This is my router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home'
import Login from '../views/Login'
Vue.use(Router)
export default new Router({
//mode: 'hash',
routes: [
{
path: '/',
component: Home
},
{
path: '/login',
component: Login
},
]
})
And this is my login view
<template>
<div class="page">
<p>
Login
</p>
</div>
</template>
<script>
export default {
components: { }
}
</script>
But anywhere I browse to, http://127.0.0.1:4000/login http://127.0.0.1:4000/home http://127.0.0.1:4000/asdasdf it renders the home template, what am I missing?
this is my app.js
import Vue from 'vue'
import { sync } from 'vuex-router-sync'
import App from './components/App'
import router from './router'
import store from './store'
sync(store, router)
const app = new Vue({
router,
store,
...App
})
export { app, router, store }
I run the dev server with
npm run dev
If I modify the home template I see the changes, but the routing doesnt seem to work to /login or other views.
Add the <router-view></router-view> in your main component (App.vue):
<template>
<!-- html elements of the App.vue page -->
<!-- router component -->
<router-view></router-view>
</template>
And specify history mode in your router:
export default new Router({
mode: 'history',
routes: [
...
这篇关于不能让路由器工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
