Home Articles

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

Asked
Viewed 1416 times
0

我正在尝试使用vue-router将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

2 Answers

  • 0

    我想你也可以试试如下 . 这是有效的,试试吧!您可以添加 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
    });
    

    希望这对你有所帮助!

  • 0

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

    这就是为什么当您的网址为'/ first'时,您无法获得'Hello'组件 . 相反,你可以尝试输入'/#/ first' . 如果要使用'/ first'这样的历史模式,请像这样设置路由对象的mode属性 .

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

    希望它能帮到你 .

Related