我正在尝试使用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 回答
我想你也可以试试如下 . 这是有效的,试试吧!您可以添加
mode: 'hash',
以在所有urls
中提供默认#
.您也可以使用以下命令将其从
urls
中删除:希望这对你有所帮助!
这就是为什么当您的网址为'/ first'时,您无法获得'Hello'组件 . 相反,你可以尝试输入'/#/ first' . 如果要使用'/ first'这样的历史模式,请像这样设置路由对象的mode属性 .
希望它能帮到你 .