vue-router中路由组件router-view没有渲染出相应的结果

问题描述

问 题

1.vue-router进行路由的配置，<router-link></router-link> 有生效生成 标签，但<router-view></router-view>在点击上面router-link组件生成的导航a,没有任何结果展示。

2.[code1]:

<template>
  <div id="app">
    <v-header></v-header>
    <div class="tab">
      <div class="tab-item">
        <!-- 通过router-link组件来导航, 使用`to`属性指定链接,`<router-link>`默认会渲染成一个`a 标签 -->
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评价</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <div class="content">
      <!-- 路由出口 -->
      <!-- 路由匹配的组件将渲染到这里 -->
      <router-view></router-view>
    </div>
  </div>
</template>

[code2]:

import Vue from 'vue';
import App from './App';
import VueRouter from 'vue-router';
import goods from './components/goods/goods';
import ratings from './components/ratings/ratings';
import seller from './components/seller/seller';

Vue.use(VueRouter);

const routes = [
  {path: '/goods', component: goods},
  {path: '/ratings', component: ratings},
  {path: '/seller', component: seller}
];

const router = new VueRouter(routes);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router
});

3.渲染效果：

4.使用的版本："vue-router": "^2.1.1"

找了很久都没有解决问题，routes、"router"这些词眼上也检查了几遍，但也没找到问题所在？请诸位，帮我解答一下，谢谢。

解决方案

正如楼上说的，new VueRouter()的参数是一个对象

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

const app = new Vue({
  el: '#app',
  router
})

这篇关于vue-router中路由组件router-view没有渲染出相应的结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！