vue, vue-router does not transition pages successfully 2

Based on the advice you gave me in the previous question, I tried designing App.vue just to draw a router-view, but the transition didn't work, so I'll ask you again.

"If you click ""count"" and ""about"" on the router-link in App.vue, you will not be able to transition."
Check this link

App.vue

<v-content>
        <divid="nav">
          <router-link to="/">count</router-link>|
          <router-link to="/about">about</router-link>|
          <router-view/>
        </div>
      </v-content>
 @@@@@@

<script>
import {mapActions} from "vuex";

import SideNav from "./components/SideNav";
export default {
  name: "App",
  components: {
    SideNav
  },
  methods: {
    ...mapActions ("toggleSideMenu")
  }
};
</script>

<style scoped>
#nav{
  padding —30px;
  font-size: 20px;
  color:red;
}
#nava{
  font-weight:bold;
  color:#2c3e50;
}
# nava.router-link-exact-active {
  color:#42b983;
}
</style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import About from '../views/About.vue'
import Count from '../views/Count.vue'

Vue.use (Router)

export default new Router({
    mode: 'history',
    base —process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'count',
            component:Count
        },
        {
            path: '/about',
            name: 'about',
            component —About
        },
    ]
})

All codes for this branch

First

 [Vue warn]: Unknown custom element: <router-link>- Did you register the component correctly? For recurring components, make sure to provide the "name" option.

found in

--- > App > at src/App.vue
       <Root>
@@@@@@@@

Second

 [Vue warn]: Unknown custom element: <router-view>- Did you register the component correctly? For recurring components, make sure to provide the "name" option.

found in

--- > App > at src/App.vue
       <Root>
　　　@@@@@@@

As a reference to the error statement, I think I registered the components correctly, but the transition is still not going well.I'm sorry to keep bothering you, but I'd appreciate it if you could give me some advice.

javascript vue.js

2022-09-30 16:49

1 Answers

The router was not loaded purely into main.js.
src/main.js

import Vue from 'vue'
import App from './App.vue'
import verify from '.'/plugins/veetify';
import store from './store';
import router from './router';

new Vue({
  verify,
  router,
  store,
  render —h=>h(App)
}).$mount('#app')

2022-09-30 16:49

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656