Question

您好，我的问题很抱歉，但我无法在Google中找到正确的答案。我无法在Vue中访问this。$ router。从我发现的内容来看，vue注入路由器是对每个组件的依赖。但是仍然没有显示我的this。$ route。我正在使用Vue版本3.2.1和vue-router 3.0.1（在生成项目时从CLI中选择）。我被允许浏览。一切似乎都是正确的，只是这个依赖$ router我没有访问权限。

我尝试对Google进行所有研究，但未成功。我发现的只是说vue注入路由器作为对每个组件的依赖关系而仍然无法找到作为我的$ router类的属性。其他一切都正常工作，我的意思是路由器链接，路由器查看只是为了达到参数或查询或重定向的属性。

Answer 1

您如何使用Vue初始化vue-router模块？应该是这样的：

import Vue from 'vue'
import VueRouter from 'vue-router'

// Include plugin
Vue.use(VueRouter)

// Initialize your router
const vueRouter = new VueRouter({
   routes: [] // your routes
})

// Send your router to your Vue top component
const app = new Vue({
    el: '#my-app',
    router: vueRouter,
    render: h => h(App)
})

Answer 2

import Vue from 'vue';
import './plugins/vuetify'
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

Vue.config.productionTip = false;

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

我的路线中有单独的文件：

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Signin from './views/Users/Signin.vue';
import Signup from './views/Users/Signup.vue';
import Profile from './views/Users/Profile.vue';
import AddPlace from './views/WorldPlaces/AddPlace.vue';
import AllPlaces from './views/WorldPlaces/AllPlaces.vue';
import DetailsPlace from './views/WorldPlaces/DetailsPlace.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/signup',
      name: 'signup',
      component: Signup
    },
    {
      path: '/signin',
      name: 'signin',
      component: Signin
    },
    {
      path: '/profile',
      name: 'profile',
      component: Profile
    },
    {
      path: '/places/add',
      name: 'addplace',
      component: AddPlace
    },
    {
      path: '/places/all',
      name: 'allplaces',
      component: AllPlaces
    },
    {
      path: '/places/details/:id',
      name: 'detailsplace',
      component: DetailsPlace
    }

    // {
    //   path: '/about',
    //   name: 'about',
    //   // 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: "about" */ './views/About.vue'),
    // },
  ],
  mode: 'history'
});

缺少Vue路由器依赖性

2 个答案: