webpack+vue路由
程序员文章站
2024-02-06 19:37:28
只写路由部分的相关内容 需引入路由包 app.vue 以下两个在一个main文件夹里 1.veu 2.vue 路由嵌套 加了个children而已 对路由进行分离 main.js router.js ......
只写路由部分的相关内容
需引入路由包
import vue from 'vue' // 1. 导入 vue-router 包 import vuerouter from 'vue-router' // 2. 手动安装 vuerouter vue.use(vuerouter) // 导入 app 组件 import app from './app.vue' // 导入 account 组件 import account from './main/account.vue' import goodslist from './main/goodslist.vue' // 3. 创建路由对象 var router = new vuerouter({ routes: [ // account goodslist { path: '/account', component: account }, { path: '/goodslist', component: goodslist } ] }) var vm = new vue({ el: '#app', render: c => c(app), // render 会把 el 指定的容器中,所有的内容都清空覆盖,所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 router // 4. 将路由对象挂载到 vm 上 }) // 注意: app 这个组件,是通过 vm 实例的 render 函数,渲染出来的, render 函数如果要渲染 组件, 渲染出来的组件,只能放到 el: '#app' 所指定的 元素中; // account 和 goodslist 组件, 是通过 路由匹配监听到的,所以, 这两个组件,只能展示到 属于 路由的 <router-view></router-view> 中去;
app.vue
<template> <div> <h1>这是 app 组件</h1> <router-link to="/account">account</router-link> <router-link to="/goodslist">goodslist</router-link> <router-view></router-view> </div> </template> <script> </script> <style> </style>
以下两个在一个main文件夹里
1.veu
<template> <div> <h1>这是 account 组件</h1> </div> </template> <script> </script> <style> </style>
2.vue
<template> <div> <h1>这是 goodslist 组件</h1> </div> </template> <script> </script> <style> </style>
路由嵌套
加了个children而已
对路由进行分离
main.js
import vue from 'vue' // 1. 导入 vue-router 包 import vuerouter from 'vue-router' // 2. 手动安装 vuerouter vue.use(vuerouter) // 导入 app 组件 import app from './app.vue' // 导入 自定义路由模块 import router from './router.js' var vm = new vue({ el: '#app', render: c => c(app), // render 会把 el 指定的容器中,所有的内容都清空覆盖,所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中 router // 4. 将路由对象挂载到 vm 上 }) // 注意: app 这个组件,是通过 vm 实例的 render 函数,渲染出来的, render 函数如果要渲染 组件, 渲染出来的组件,只能放到 el: '#app' 所指定的 元素中; // account 和 goodslist 组件, 是通过 路由匹配监听到的,所以, 这两个组件,只能展示到 属于 路由的 <router-view></router-view> 中去;
router.js
import vuerouter from 'vue-router' // 导入 account 组件 import account from './main/account.vue' import goodslist from './main/goodslist.vue' // 导入account的两个子组件 import login from './subcom/login.vue' import register from './subcom/register.vue' // 3. 创建路由对象 var router = new vuerouter({ routes: [ // account goodslist { path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register } ] }, { path: '/goodslist', component: goodslist } ] }) // 把路由对象暴露出去 export default router