vue-router路由

时间:2020-05-19
本文章向大家介绍vue-router路由,主要包括vue-router路由使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

先创建一个vue-cli项目,在该项目下完成以下操作。

安装

vue-router是一个插件包,所以我们还是需要用npm/cnpm来进行安装。

在IDEA下的命令行输入:

npm install vue-router --sace-dev

(如果出现错误,按照提示解决即可)

下载成功后会在node_moudles包里出现vue-router文件。

然后在main.js里导入vue-router

import VueRouter from 'vue-router'

并显示声明使用Vuerouter

Vue.use(VueRouter);

测试

  1. 先删除没有用的东西

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

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

    <template>
      <div>
        <h1>内容页</h1>
      </div>
    </template>
    
    <script>
        export default {
            name: "Content"
        }
    </script>
    
    <style scoped>
    
    </style>
    
  4. 安装路由,在src目录下,新建一个router文件夹,专门存放路由。在里面创建index.js

    import Vue from "vue"
    //导入路由插件
    import Router from 'vue-router'
    //导入上面定义的组件
    import Content from '../components/Content'
    
    //安装路由
    Vue.use(Router);
    //配置路由
    export default new Router({
      routes:[
        {
          //路由路径
          path:'/content',
          //路由名称
          name:'Content', //可省略
          //跳转到组件
          component:Content
        }
      ]
    })
    
    
  5. 在 main.js 中配置路由

    import Vue from 'vue'
    import App from './App'
    //自动扫描里面的路由配置
    import router from './router'
    
    Vue.config.productionTip = false;
    
    new Vue({
      el: '#app',
      //配置路由
      router:router,
      components: { App },
      template: '<App/>'
    });
    
    
  6. 在 App.vue 中使用路由

    <template>
      <div id="app">
        <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>
    
    

    router-link:默认会被渲染成一个a标签,to属性为指定链接

    router-view:用于渲染路由匹配到的组件

最终效果如下:

点击链接会出现下方文字

原文地址:https://www.cnblogs.com/hellowen/p/12919349.html