question
at the beginning of learning from Vue, I tried to write a random page with Element UI and found that there was something wrong with the navigation route. The
question is very weird. I looked at it for a long time and didn"t see anything wrong, so I came to ask for advice. The project is created with @ Vue/Cli "s UI
routing configuration:
router.ts
import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
Vue.use(Router);
export default new Router({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "home",
component: Home,
},
{
path: "/dailytools/Currency",
name: "currency",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "currency" */ "./views/Currency.vue"),
},
],
});main.ts
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "./plugins/element.js";
import i18n from "./i18n";
Vue.config.productionTip = false;
new Vue({
router,
i18n,
render: (h) => h(App),
}).$mount("-sharpapp");when I switch from Home to Currency, router-view only displays the contents of Currency. If I don"t refresh it, I can"t go back to Home.
<el-main class="pwp-main">
<router-view :key="key"></router-view>
</el-main>
computed: {
key() {
return this.$route.name !== undefined
? this.$route.name + +new Date()
: this.$route + +new Date();
}
}Navigation uses el-menu, bound: router= "true".
personal feeling is the routing configuration problem but do not know how to write correctly. Ask the boss for help.
=
add:
has been tested. In router.ts, as long as currency is imported, it will not switch back to home