如何使用vue-router将路由链接到组件

Question

我正在尝试使用vue-router将URL链接到其相应的组件。

我的问题是，只有root URL（'/'）才能链接到正确的组件，并且任何其他URL（例如'/first'）不会链接到其组件。所有这些都链接到属于"/" URL的组件。

当我在vue文件中使用" a"标签时，它将路由到正确的组件 - 只有当我直接将URL输入浏览器时，它才能工作

main.js：

import Vue from 'vue'
import router from './router/index.js'
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  // components: { App },
  render: h => h(App)
})

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(Router)

const routes =[
  {
    path: '/',
    component: Login
  },
  {
    path:'/first',
    component:Hello
  }
]
const router = new Router({
  routes
})
export default router

Answer 1

我认为您也可以在下面尝试。这是有效的，试试看！您可以添加mode: 'hash',以在所有urls中给出默认的#。

import Vue from 'vue';
import Router from 'vue-router'
import Hello from '../components/Hello.vue'
import First from '../components/firstPage.vue'
import Login from '../components/logIn.vue'
Vue.use(VueRouter);
const router = new VueRouter({
   mode: 'hash',
   base: '/your_base_name_if_you_want',
   linkActiveClass: 'active-tab', //if you w
   routes: [
    {
        path: '/',
        redirect: '/if_you_want_to_redirect',
        name: 'Login',  //Whatever
        component: {
            render (c) { return c('router-view'); }
        },
        children: [
            {
                path: '/',
                component: Login
                name: 'Login',
                meta: { title: 'Your title name' }
            },
            {
                path:'/first',
                component:Hello
                name: 'Hello',
                meta: { title: 'Your title name' }
            }
        ]
    }
]
})
export default router

您也可以使用以下方式从urls中删除它。

var router = new VueRouter({
    history: true
});

希望这对您有帮助！

Answer 2

vue-router的默认模式是哈希模式

这就是为什么当您的URL为'/first'时您无法获得" Hello"组件的原因。相反，您可以尝试输入'/＃/first'。如果要使用诸如'/first'之类的历史模式，请为您的路由对象设置模式属性。

const router = new Router({
  mode: 'history',
  routes
})

希望它对您有帮助。