路由--工作原理

什么是 <router-view>？

• <router-view> 是 Vue Router 提供的一个特殊组件。
• 它的作用是作为一个占位符，用于显示当前路由对应的组件。

如何理解 "路由出口"？

• 把 <router-view> 想象成一个电影院的屏幕。你可以在这个屏幕上播放不同的电影（组件），而哪部电影正在播放则取决于电影院的播放安排（Vue Router 的路由配置）。
• 当你更改播放安排（切换路由），屏幕上的电影也会相应更换。

 

Vue Router 如何决定渲染哪个组件？

1. 路由配置：你在 Vue Router 的配置中定义了一系列的 "播放安排"。这些配置告诉 Vue Router 当用户访问特定路径（如 /home、/about）时应该显示哪个组件。

   

2. 用户访问特定路径：当用户访问一个路径（比如 /about），Vue Router 查找其配置，找到与这个路径相匹配的组件（在这个例子中是 AboutComponent）。

3. 渲染组件：找到匹配的组件后，Vue Router 在 <router-view> 的位置显示这个组件。如果用户切换到另一个路径，Vue Router 会在同一个 <router-view> 位置替换为新的组件。

　　

　　

 

　　4. 挂载到了整个应用的入口点index.html 

　　

 

　总结：

　　　　当用户访问不同的路由时，Vue Router 查找与当前路由路径匹配的组件，并渲染到 App.vue 中的 <router-view> 里。因此，<router-view> 中不需要手动写入任何组件标签，Vue Router 会自动处理这一切。这也是为什么在 <router-view> 标签中看不到任何东西，但你的应用却能够根据不同的路由显示不同的页面内

 

案例：

点击实现页面跳转

 生成新的页面：

function openNewTab() {
  const newRoute = '#/knowledgemap'; // 你的Vue Router路径
  const baseUrl = window.location.origin; // 获取当前页面的基础URL
  const fullUrl = `${baseUrl}${newRoute}`; // 构建完整的URL
  window.open(fullUrl, '_blank'); // 在新标签页中打开