[英]Vue-router: do i need to define the default route for vue-router
Experimenting with vue-router, when i click on <router-link to="/about">Go to About</router-link>
it doesnt redirect me to anywhere so for example: if i was on localhost:8080/#/
and i click the Go to About
button, i still remain on localhost:8080/#/
.尝试使用 vue-router,当我单击
<router-link to="/about">Go to About</router-link>
时,它不会将我重定向到任何地方,例如:如果我在localhost:8080/#/
然后我单击Go to About
按钮,我仍然留在localhost:8080/#/
上。 Also if i change the url directly to localhost:8080/#/about
nothing happens (ie no change to the website as if i am still on localhost:8080/#/
)此外,如果我将 url 直接更改为
localhost:8080/#/about
什么都不会发生(即没有更改网站,就好像我仍在localhost:8080/#/
上一样)
The code:编码:
/router/index.js /路由器/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);
const routes = [
{
path: '/about',
component: () => {
import ('../views/About.vue');
}
}
]
const router = new VueRouter({
routes
})
export default router;
./App.vue ./App.vue
<template>
<div>
<div id='nav'>
<router-link to="/about">Go to Foo</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
//
},
data: () => ({
//
}),
};
</script>
./views/About.vue ./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
./main.js ./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
I tried running the following code.我尝试运行以下代码。 it gave no error on serving.
它没有给出服务错误。 (I am also using vuetify and vuex but i dont think that is the problem?)
(我也在使用 vuetify 和 vuex,但我不认为这是问题所在?)
EDIT编辑
I have edited the code such that it works by creating another vue app and using the default that vue has provided with but i cant seem to understand why the edited code works and why the previous code ^^ above didnt.我已经编辑了代码,使其通过创建另一个 vue 应用程序并使用 vue 提供的默认值来工作,但我似乎无法理解为什么编辑后的代码可以工作以及为什么前面的代码 ^^ 上面没有。 It seems like the reason was that the default
localhost:8080/#/
needs to have its own route in ./App.vue
as well and is not there by default?似乎原因是默认的
localhost:8080/#/
也需要在./App.vue
中有自己的路由,并且默认情况下不存在? can someone confirm this (can't seem to find something like this explanation online?)有人可以证实这一点(似乎无法在网上找到类似的解释吗?)
Revised working code:修改后的工作代码:
./App.vue ./App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
./views/Home.vue ./views/Home.vue
<template>
<h1>This is the home page</h1>
</template>
<script>
export default {
name: 'Home',
components: {
//
},
data: () => ({
//
}),
};
</script>
./main.js ./main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify';
import store from './store';
import router from './router';
Vue.config.productionTip = false;
new Vue({
vuetify,
store,
router,
render: h => h(App)
}).$mount('#app')
./router/index.js ./router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router';
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: () =>
import("../views/About.vue")
}
];
const router = new VueRouter({
routes
})
export default router;
./views/About.vue ./views/About.vue
<template>
<p>Testing out vue-routes</p>
</template>
You need to have a <router-view/>
where the routes are going to resolve.您需要有一个
<router-view/>
来解析路由。
You can read more about it here: documentation您可以在此处阅读有关它的更多信息:文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.