Question

我尝试使用vue-router将网址链接到相应的组件。

我的问题是只有根网址（＆＃39; /＆＃39;）可以链接到正确的组件，而任何其他网址（例如＆＃39; / first＆＃39;）都不会链接到他们的组件。所有这些都链接到属于＆＃39; /＆＃39;网址。

当我使用＆＃34; a＆＃34;它将在vue文件中标记，它将路由到正确的组件 - 只有当我将网址直接输入浏览器时它才能正常工作

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的默认模式是哈希模式

这就是为什么当你的网址为'/ first'时你无法获得'Hello'组件。相反，你可以尝试输入'/＃/ first'。如果要使用“/ first”之类的历史记录模式，请像这样设置路径对象的mode属性。

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

希望它对你有所帮助。

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

2 个答案: