Javascript

vue-router 路由

本文主要是介绍vue-router 路由,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

 

说明

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

Vue Router 是 Vue.js 官方的路由管理器,他和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。

包含的功能有:

  • 嵌套的路由/视图表

  • 模块化的、基于组件的路由配置

  • 路由参数、查询、通配符

  • 基于 Vue.js 过度系统的视图过度效果

  • 细粒度的导航控制

  • 带有自动激活的 CSS class 的链接

  • HTML5 历史模式或 hash 模式,在 IE9 中自动降级

  • 自定义的滚动条行为

安装

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

npm install vue-router --save-dev

 

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

import Vue from 'vue'
import VueRouter from 'vue-router'
​
Vue.use(VueRouter);

 

测试

测试基于:https://www.cnblogs.com/kaisheng-reflect/p/14994142.html 中的 my-vue 项目

  1. 先删除没有用的东西,如 assets 下的 logo 、hello.vue、hello.js

  2. components 目录下存放我们自己编写的组件

  3. 定义一个 Content.vue 组件

    <template>
      <h1>内容页</h1>
    </template>
    ​
    <script>
      export default {
        name: "Content"
      }
    </script>
    ​
    <style scoped>
    ​
    </style>
    ​

     

  4. 安装路由,在 src 目录下新建一个文件夹 router ,专门存放路由。在 router 文件夹下新建index.js 作为路由入口。

    import Vue from 'vue'
    //导入路由插件
    import VueRouter from "vue-router";
    ​
    //导入自定义组件
    import Content from "../components/Content";
    import Main from "../components/Main";
    ​
    //安装路由
    Vue.use(VueRouter);
    ​
    //配置导出路由
    export default new VueRouter({
      routes: [
        {
          name: 'content',
          path: '/content',
          component: Content
        },
        {
          name: 'main',
          path: '/main',
          component: Main
        }
      ]
    });

     

  5. main.js 中配置路由

    import Vue from 'vue'
    import App from './App'
    ​
    //导入路由配置目录
    import router from './router' //自动扫描里面的路由配置
    ​
    //用来关闭生产模式下给出的提示
    Vue.config.productionTip = false
    ​
    //显式声明使用 VueRouter
    new Vue({
      el: '#app',
      router, //配置路由
      components: {App},
      template: '<App/>'
    })
    ​

     

  6. App.vue中使用路由。

    <template>
      <div id="app">
        <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>
    ​
    <style>
      #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
      }
    </style>
这篇关于vue-router 路由的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!