Vue笔记：Vue Router路由

小咪咪 2022-12-10 14:36 301阅读 0赞

文章目录

  • vue-router路由
        • 说明
        • 安装
        • 测试

vue-router路由

说明

学习的时候，尽量的打开官方的文档

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为

安装

基于第一个vue-cli进行测试学习;先查看node_modules中是否存在 vue-router

vue-router 是一个插件包，所以我们还是需要用 npm/cnpm 来进行安装的。打开命令行工具，进入你的项目目录，输入下面命令。

  1. npm install vue-router --save-dev

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  4. Vue.use(VueRouter);

测试

  • 1、先删除没有用的东西
  • 2、components目录下存放我们自己编写的组件

  • 3、定义一个Content.vue 的组件

  • 4、 安装路由,在src目录下,新建一个文件夹 : router,专门存放路由

    import Vue from ‘vue’
    // 导入路由插件
    import Router from ‘vue-router’
    // 导入上面定义的组件
    import Content from ‘../components/Content’
    import main from ‘../components/main’
    // 安装路由
    Vue.use(Router);
    // 配置路由
    export default new Router({
    routes: [

    1. { 
    2.   // 路由路径
    3.   path: '/content',
    4.   // 路由名称
    5.   name: 'Content',
    6.   // 跳转到组件
    7.   component: Content
    8. }, { 
    9.   // 路由路径
    10.   path: '/main',
    11.   // 路由名称
    12.   name: 'main',
    13.   // 跳转到组件
    14.   component: main
    15. }

    ]
    });

  • 5、在main.js 中配置路由

    import Vue from ‘vue’
    import App from ‘./App’

    // 导入上面创建的路由配置目录
    import router from ‘./router’

    //来关闭生产模式下给出的提示
    Vue.config.productionTip = false;

    new Vue({
    el: ‘#app’,
    // 配置路由
    router,
    components: { App },
    template: ‘‘
    });

  • 6、在App.vue中使用路由

启动测试一下 ： npm run dev

发表评论

表情：
评论列表 （有 0 条评论，301人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue-router路由

    > 在这个世界上取得成就的人，都努力去寻找他们想要的机会，如果找不到机会，他们便自己创造机会。 > 你好，我是梦阳辰！期待与你相遇！ 文章目录 01.什么是路

    青旅半醒青旅半醒/ 0 赞/ 390 阅读

    相关 vue-router，vue路由简介

    （一）命名路由 命名路由是目前开发当中使用最频繁的形式 通过一个名称 name：属性来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候，可以直

    女爷i女爷i/ 0 赞/ 328 阅读