Vue:vue-router路由

本文最后更新于:3 years ago

说明

学习的时候,尽量的打开官方文档 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
    2
    3
    4
    import Vue from 'vue'
    import VueRouter from 'vue-router'

    Vue.use(VueRouter);


    测试

    1、先删除没有用的东西

    2、component 目录下存放我们自己编写的组件

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <template>
    <h1>内容</h1>
    </template>

    <script>
    export default {
    name: "Content"
    }
    </script>

    <style scoped>

    </style>

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    import Vue from "vue"
    //导入路由插件
    import VueRouter from "vue-router"

    //导入上面定义的插件
    import Main from '../components/Main'
    import Content from '../components/Content'

    //安装路由
    Vue.use(VueRouter);

    //配置导出路由
    export default new VueRouter({
    routes: [
    {
    //路由路径
    path: '/content',
    //路由名称
    name: 'content',
    //跳转的组件
    component: Content
    },
    {
    //路由路径
    path: '/main',
    //路由名称
    name: 'content',
    //跳转的组件
    component: Main
    }
    ]
    });

    5、在 main.js 中配置路由

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    import Vue from 'vue'
    import App from './App'

    //导入上面创建的路由配置目录
    import router from './router' //自动扫描里面的路由配置

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

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

    6、在 App.vue 中使用路由

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <template>
    <div id="app">
    <!--
    router-link: 默认会被渲染成一个 <a> 标签,to属性为指定链接
    router-view:用于渲染路由匹配到的组件
    -->

    <h1>Vue-Router</h1>
    <router-link to="/main">主页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
    </div>
    </template>

    <script>


    export default {
    name: 'App',

    }
    </script>

    7、在idea中的Terminal运行使用以下指令:

    1
    npm run dev

    本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!