| 【vue】vue | 您所在的位置：网站首页 › 路由默认页面 › 【vue】vue |
【vue】vue
|
vue-router
2022/4/13 周三 vue新手入门，如有错误，欢迎在评论区指出，非常感谢！ 1. router/index.js 配置路由分为3步： （1）导入 router包（如果没下载的需要先install下载） （2）需要明确安装路由功能： （3）配置路由 import Vue from 'vue' import Router from 'vue-router' // 导入router包 import home from '@/home/index' // 路由里配置的组件都需要先导入 import one_premiun from '@/components/one_premiun' Vue.use(Router) // 明确安装路由功能 export default new Router({ routes: [ // 配置路由 { path: '/', name: 'home', component: home }, { path: '/one_premiun', name: 'one_premiun', component: one_premiun, meta: { title: '页面一' } } ] })所有要跳转的页面地址都在这里配置。 参数： path：路由路径 name：路由名称 component：跳转到组件（组件记得要import） title：浏览器标题（标题光在这里写了还不够，需要看下一步配置） 2. main.js 引入路由文件（1）也是先import （2）在new Vue({})里声明router （3）如果要设置标题，在new Vue后面加一段代码 import Vue from 'vue' import Vuex from 'vuex' import home from './home/index' import router from './router' // 引入文件 new Vue({ el: '#app', router, // 声明 components: { home }, template: '' }) router.beforeEach((to, from, next) => { if (to.meta.title) { //拦截后设置标题 document.title = to.meta.title } next() }) 3. 使用路由比如在App.vue文件里使用路由，直接在template部分放组件： Hello App! 首页 保费（1）router-link 该组件用于设置一个导航链接，切换不同 HTML 内容，默认会被渲染成一个标签。 to属性 为目标地址，即前面在路由里配置的path。 还可以加一个 replace属性 ，让目标页面替换当前页面 ： 页面一原本不加replace，跳转到目标页one_premiun后，如果通过浏览器回退，是回退到当前页面home； 而加replace之后，就会回退到home的上一个页面。 （2）router-view：用于渲染路由匹配到的组件。 如果不加router-view，从地址栏可以看到页面能正常跳转，但是页面不会显示对应的组件。 4. 路由嵌套直接在父路由的children属性里嵌套子路由，写法如下： routes: [ { //登录页 path: '/main', component: Main, // 写入子模块 children: [ { path: '/user/profile', component: UserProfile, }, { path: '/user/list', component: UserList, }, ] } ] 5. 关于组件还想顺便说一下，其实我做的项目，页面之间的跳转需求还是原始的那种，没有菜单栏，就是主页放一些链接，跳转到对应的子页面，在子页面里我是不需要显示主页内容的。 但通过vue的路由来做，由于组件化了，它必须是先有一个主页的展示，然后在主页内容的里面放router-view才有对应的子页面。这样的话，即使我跳转到子页面，还是必须显示主页的内容，作为移动端查看的网页，这样太占地方了。 由于我才刚入门前端，不知道怎么做，就找到了一种折叠面板的方法：vue使用element实现折叠面板。 它的主页由折叠面板和router-view组成，我在这个基础上做改动： （1）让折叠面板浮动在最上方； （2）当跳转到子页面之后，把折叠之后的面板缩到最小，这样就不影响页面的内容了。 （其实本来是想折叠到全部隐藏，但这样的话，要从子页面退回到主页就只能靠浏览器的回退了，而回退之后折叠面板还是被折叠的状态，不刷新就没法正常使用了，所以最后就留了一个角）
|
虽然有些方法可能有点笨，也许有更简洁、更规范的写法，但作为新手，能达到目的就行啦！在这个过程中还是学到不少东西。【本文地址】