vue路由管理.zip

  • j7_665630
    了解作者
  • 505.1KB
    文件大小
  • zip
    文件格式
  • 0
    收藏次数
  • VIP专享
    资源类型
  • 0
    下载次数
  • 2022-05-01 15:41
    上传日期
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。
vue路由管理.zip
内容介绍
# Vue-router ### 准备 ``` npm install npm run serve npm run build ``` ### 项目结构 ```markdown -assets -components -router |-modules |-news.js |-user.js |-index.js -store -views |-news |-components |-news1.vue |-news2.vue |-index.vue |-user |-index.vue |-Home.vue |-app.less |-app.vue |-main.js ... ``` ### 路由配置 src / router / index.js 文件 路由由上往下依次进行匹配知道找到相匹配的路径,当所有路径都不匹配的时候,重定向到 404页面 ```javascript import Vue from "vue"; import VueRouter from "vue-router"; // 引入 News 和 User 两个模块 import News from "./modules/news" import User from "./modules/user" Vue.use(VueRouter); const routes = [ { path: "/", name: "Home", component: () => import("@/views/Home.vue") }, { path: "/404", name: "NotFound", component: () => import("@/404.vue") }, News, User, { path: '*', // 输入的路径在routes里面没有匹配到的时候,重定向到404页面 redirect: '/404' } ]; const router = new VueRouter({ mode: "history", // 路由模式 history base: process.env.BASE_URL, // vue.config.js 配置基础地址 routes }); // 添加导航守卫 -- to:准备要进入的路由对象,from:即将离开的路由对象,next() // 例如:可以在路由跳转之前判断用户是否登录,没有登陆的话重定向到 login页面 // router.beforeEach((to, from, next) => { // // ... // }) export default router; ``` ### 模块化及嵌套路由 router / modules / news.js 文件 ```javascript // news 模块路由 const NewsRoute = { // 注意:返回的格式是一个对象,不是一个数组!! path: "/news", // name: "News", // 因为news路径下有默认加载的模块 news1 ,所以此处的name属性省去 component: () => import("@/views/news/index.vue"), children: [ { path: "", // 进入news页面是默认首先显示此组件 component: () => import("@/views/news/components/news1.vue"), }, { path: "news2", component: () => import("@/views/news/components/news2.vue"), } ] } export default NewsRoute ``` ### 路由跳转 home 页面跳转到 news页面: **注意**:官方文档有备注,使用this.$router.push( { path:'/news' , params:{id:123} } )时,params不生效,需要把prams替换为query,导航栏路径里面会显示参数信息 或者使用 this.$router.push( { name:'路由配置的name' , params:{id:123} } ) 这种形式来进行传递参数 ```html <template> <div class="home"> <h1>home页面</h1> <div> <button class="bd0" @click="goNews">news</button> </div> </div> </template> <script> export default { name: 'Home', components: {}, methods: { goNews() { // 跳转到news页面 this.$router.push({ path: '/news', query: { id: 123 } }) } } } </script> ``` news 页面: news 页面使用 this.$route.query 或 this.$route.params 来接收上一个页面传递下来的参数 ```html <template> <div> <h1>news页面</h1> <div class="flex"> <button class="bd0" @click="goNews1">news1</button> <button class="bd0 ml15" @click="goNews2">news2</button> </div> // 用来存放嵌套路由,如:点击 news2 按钮,此处就会显示 news2 组件的内容 <router-view></router-view> </div> </template> <script> export default { created() { console.log(this.$route.query) // 打印出来为 { id:123 } }, methods: { goNews1() { // 因为 news1 是news模块展示的时候默认显示的内容,所以跳转到 news 页面即可 // 可以设置 news1 不是默认,path:"news1" 则 this.$router.push('/news1') this.$router.push('/news') }, goNews2() { this.$router.push('/news/news2') } } } </script> ```
评论
    相关推荐
    • vue.js
      示例应用 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
    • vue.js
      vue.js
    • vue.py:Pythonic Vue.js
      vue.py 在纯Python中使用 vue.py提供了Python绑定 。 它使用在浏览器中运行Python。 这是vue.py组件的一个简单示例 from browser import alert from vue import VueComponent class HelloVuePy ( VueComponent ):...
    • Vue.js权威指南
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • Vue.js 教程
      Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简 单、灵活的 API。从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模 型。实际...
    • Vue.js权威指南
      如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果你对如何实践感兴趣,《Vue.js权威指南》都是一本不容错过的以示例代码为引导、知识涵盖全面...
    • Vue.js权威指南》
      Vue.js权威指南》致力于普及国内Vue.js 技术体系,让更多喜欢前端的人员了解和学习Vue.js。如果你对Vue.js 基础知识感兴趣,如果你对源码解析感兴趣,如果你对Vue.js 2.0感兴趣,如果你对主流打包工具感兴趣,如果...
    • vue.js
      乌苏 npm install npm start 。 波尔多电报公司8080 来源
    • vue.jsvue.min.js
      vue.jsvue.min.jsvue.jsvue.min.jsvue.jsvue.jsvue.min.jsvue.jsvue.min.jsvue.min.jsvue.jsvue.min.j s
    • Web Worker中的Vue.js-Vue.js开发
      这是由Rollup.js捆绑提供的使用WorkerDOM在Web Worker中工作的Vue.js的“ hello world”演示应用程序。 Web Worker中的Vue.js这是Vue.js的“ hello world”演示应用程序,由Rollup.js捆绑使用WorkerDOM在Web Worker...