我如何 link 使用 vue-router 到组件的路由？

Question

我正在尝试使用 vue-router 来 link url 到它们相应的组件。

我的问题是只有根 url ('/') 可以 link 到正确的组件，而任何其他 url (例如 '/first') 不能 link 到他们的组件。全部 link 到属于 '/' 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

The default mode for vue-router is hash mode

这就是为什么当您的 url 是 '/first' 时您无法获取 'Hello' 组件的原因。相反，您可以尝试输入“/#/first”。如果你想使用像'/first'这样的历史模式，像这样为你的路由对象设置模式属性。

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

希望对你有帮助。

我如何 link 使用 vue-router 到组件的路由？

How do I link the route to the component using vue-router?

vue.js

vue-router