VUE router-view_<router-view满足条件执行代码-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80025575

本文介绍了 Vue.js 中 vue-router 的基本用法，包括如何定义路由、使用 <router-view> 渲染组件以及 <router-link> 实现导航。通过一个简单的 SPA 示例，展示了如何设置路由和组件之间的映射。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<router-view></router-view>标签是vue-router中的一个东西，当满足路由的条件时，即触发路由时，

将对应的模板渲染显示在这个标签的地方；

例如：

我们在SPA(单页应用) 中使用vue-router来组织我们的路由，比如现在有三个导航：

Home news sports 三个导航，

我们设计下面的路由：

假设三个导航对应的模板是： Home News Sports

const router=new VueRouter({
    mode:'history',
    base:__dirname,
    routes:[
        {path:"/",component:Home},
        {path:"/first",component:News},
        {path:"/second",component:Sports}
    ]
})

上面路由的意思是：当访问根目录的时候，我们渲染出Home模板，也就是html页面；

当访问根目录的时候，我们渲染出News模板，也就是html页面；

当访问根目录的时候，我们渲染出Sports模板，也就是html页面；

再看看下面的代码：

new Vue({
   router,
   template:`
    <div>
        <h3导航</h3>
        <ul>
            <li><router-link to="/">主页</router-link></li>
            <li><router-link to="/first">第一页</router-link></li>
            <li><router-link to="/second">第二页</router-link></li>
        </ul>
        <router-view></router-view>
    </div>
   `
}).$mount("#app");