vue 子路由不写router view可以显示吗_对 router-view 的理解

时间: 2023-10-20 19:30:34 浏览: 101

Vue学习之旅Part16：Vue结合webpack使用vue-router实现路由和子路由

一、使用vue-router实现路由由于是通过vue-router实现的路由因此须先安装vue-router：输入cnpm i vue-router -S以安装vue-router包然后在main.js里导包：导入VueRouter的包之前必须先导入Vue的包： import Vue from vue import VueRouter from vue-router 然后手动调用Vue.use()方法将vue-router安装到Vue上： Vue.use(VueRouter) 创建路由对象VueRouter： // 导入account组件 import accou Vue.js 是一个流行的前端框架，它提供了一种优雅的方式来构建用户界面。在Vue学习之旅的第16部分，我们将探讨如何结合Webpack来使用vue-router，实现应用中的路由和子路由功能。为了使用vue-router，你需要通过命令行工具安装这个库。在项目目录下，运行`cnpm i vue-router -S`，这会将vue-router添加到项目的依赖列表中，并将其标记为开发依赖（-S 或 --save-dev）。安装完成后，你需要在主入口文件（如`main.js`）中引入Vue和VueRouter。使用`import`语句分别导入Vue和VueRouter： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' ``` 接下来，使用`Vue.use()`方法安装VueRouter插件，以便在Vue实例中使用路由功能： ```javascript Vue.use(VueRouter) ``` 然后，创建一个VueRouter实例，定义路由规则。每个路由规则包括`path`（URL路径）和`component`（对应的Vue组件）。例如，导入`Account.vue`和`GoodsList.vue`组件，然后创建如下路由： ```javascript import account from "./main/Account.vue" import goodslist from "./main/GoodsList.vue" var router = new VueRouter({ routes: [ { path: "/account", component: account }, { path: "/goodslist", component: goodslist } ] }) ``` 创建好路由对象后，将其挂载到Vue实例上，通常是在`new Vue()`的选项中，利用`render`函数来渲染应用的根组件（App.vue），并把router对象传递给它： ```javascript var vm = new Vue({ el: "#app", render: h => h(App), router // 挂载路由对象 }) ``` 注意，由于`render`函数会替换`el`属性指定的DOM元素中的所有内容，所以不能直接在`el`元素内部定义`<router-view>`，否则路由内容不会显示。正确的做法是将`<router-view>`放入App.vue组件中，这样当App组件渲染时，路由的内容也会随之展示： ```html  <template> <div>This is App component</div> <router-view></router-view> </template> <script> export default {} </script> ``` Vue-router还支持子路由。在`main.js`中，可以为父路由添加子路由，子路由的`path`前不加斜杠，比如： ```javascript var router = new VueRouter({ routes: [ { path: "/account", component: account, children: [ { path: "login", component: login }, { path: "register", component: register } ] }, { path: "/goodslist", component: goodslist } ] }) ``` 在Account.vue组件中，你可以根据需要定义子组件的布局： ```html  <template> <div>This is Account component</div> <router-view></router-view> </template> <script> export default {} </script> ``` 为了保持代码的整洁，你可以考虑将路由配置抽离到单独的模块中。创建一个`router.js`文件，将所有的路由配置放在这里，然后在`main.js`中导入并使用： ```javascript // router.js import VueRouter from 'vue-router' import account from './main/Account.vue' import login from './subcomponent/login.vue' import register from './subcomponent/register.vue' export default new VueRouter({ routes: [ // 子路由配置... ] }) // main.js import Vue from 'vue' import App from './App.vue' import router from './router' // 导入抽离后的路由配置 Vue.use(VueRouter) new Vue({ el: '#app', render: h => h(App), router }) ``` 以上就是Vue结合Webpack使用vue-router实现路由和子路由的基本流程。通过这种方式，你可以构建一个具有多个页面和子页面的单页应用，同时保持代码结构清晰，易于维护。

不，子路由不写<router-view>是不能显示的。在VueRouter中，<router-view>是用来显示匹配到的组件内容的地方。如果没有写<router-view>，则无法将子路由对应的组件内容渲染到页面上。所以，需要在配置子路由时，确保在模板中正确地写上<router-view>。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [总结|VueRouter子路由不显示，不报错的问题](https://blog.csdn.net/m0_46635519/article/details/123297388)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue2.0 路由不显示router-view的解决方法](https://download.csdn.net/download/weixin_38677244/12762796)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [解决vue更新路由router-view复用组件内容不刷新的问题](https://download.csdn.net/download/weixin_38748556/12932708)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

阅读全文

vue 子路由不写router view可以显示吗_对 router-view 的理解

相关推荐

理解vue-router：SPA单页面路由原理解析

Vue3路由封装实战：webpack与vue-router整合教程

vue2.0 路由不显示router-view的解决方法

vue中app文件中写router-view，跳转路由页面也写router-view

learn21__vue-task-tracker

解决vue更新路由router-view复用组件内容不刷新的问题

深入Vue-Router路由嵌套理解

vue-router 子路由

已经安装Vue Router，在Vue实例中进行了Vue Router的配置，路由配置中定义了路由，app.vue引入·<router-view></router-view>无效

vue router-view路由详解

vue app.vue <router-view></router-view> 默认挂载界面

vue3使用vue-router路由拆分

深入vue-router路由嵌套理解

vue中app.vue里面router-view中不可以写代码吗?

vue3 router-view 不能显示

jsp页面嵌入vue打包好的页面 router- view不显示

vue-router的子路由children

Vue-Router源码分析：深入路由实现原理

Vue-Router基础与动态路由解析

最新推荐

vue-router 中router-view不能渲染的解决方法

vue2 设置router-view默认路径的实例

vue router路由嵌套不显示问题的解决方法

Vue中在新窗口打开页面及Vue-router的使用

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

MATLAB新功能：Multi-frame ViewRGB制作彩色图阴影

管理建模和仿真的文件

【实战篇：自定义损失函数】：构建独特损失函数解决特定问题，优化模型性能

在Flow-3D中如何根据水利工程的特定需求设定边界条件和进行网格划分，以便准确模拟水流问题？

XKCD Substitutions 3-crx插件：创新的网页文字替换工具