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

【问题标题】：How do I link the route to the component using vue-router?如何使用 vue-router 将路由链接到组件？
【发布时间】：2018-02-26 12:05:37
【问题描述】：

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

我的问题是只有根 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

【问题讨论】：

您必须使用your_url/first。尝试使用your_url/#/first.
它有效！非常感谢您。这是否意味着我所有的 url 都应该像 my_url/#/a/b/c? 它在 my_url 和相对 url 之间有一个 #

标签： vue.js vue-router

【解决方案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
});

希望对你有帮助！

【讨论】：

【解决方案2】：

vue-router的默认模式是hash模式

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

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

希望对你有帮助。

【讨论】：