路由 router-view 实现点击跳转时不打开新网页，而是在当前显示

1， 页面实现（html模版中）

在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。所以 <router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去， 如：<router-link to="/home">Home</router-link>

2:使用<router-view>实现点击当前页面组件时不进行跳转新页面而是在当前页面显示

1）定义子组件

navbar子组件：

<template>
    <div class="navbar">
        <ul id="main">
            <li><router-link  to="/food" >商品</router-link></li>
            <li><router-link  to="/rating">评价</router-link></li>
            <li><router-link  to="/seller">商家</router-link></li>
 
        </ul>
        
            <!-- 路由匹配到的组件将显示在这里 -->
           <router-view></router-view>
    </div>
</template>

 

2）：父组件中调用navbar子组件
3）：在父组件的路由中配置子路由

{
            path: '/home',
            component: home,
//            redirect: '/home',
            children: [

                {
                    path: 'food',
                    component: food
                },
                {
                    path: 'seller',
                    component: seller
                }
            ]
        }