Vue——router练习

梦里梦外; 2021-06-24 16:10 431阅读 0赞

## 第一步：搭建vue环境 ##

由于之前已经安装好了node.js，和一些依赖，所以在这就直接创建vue项目了。  
可参考：[http://www.jianshu.com/p/de410cefd788][http_www.jianshu.com_p_de410cefd788]

![2789632-c5ba56e140ca582c.png][]

![2789632-2808384c4332126c.png][]

![2789632-5cc9a7498baacb50.png][]

## 第二步：了解vue如何创建多页面实例（百度一个实例） ##

![2789632-5f147dfe2edb51e7.gif][]

main.js

import Vue from 'vue'
    import App from './App'
    import router from './router'
    Vue.config.productionTip = false
    
    // 路由跳转
    Vue.prototype.$goRoute = function (index) {
      this.$router.push(index)
    }
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      render: h => h(App)
    })

app.vue

<template>
      <div>
        <ul>
          <li v-for="item in links"><a @click="$goRoute(item.route)">{
        {item.text}}</a></li>
        </ul>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
      export default {
        name: 'app',
        data () {
          return {
            links: [
              {
                text: '胡萝卜',
                route: '/home'
              },
              {
                text: '大白菜',
                route: '/page01'
              },
              {
                text: '水蜜桃',
                route: '/page02'
              }
            ]
          }
        }
      }
    </script>
    <style>
      .text-center {
        text-align: center;
      }
      .spacing {
        margin-top: 30px;
      }
      .red {
        color: darkred;
      }
      ul li {
        display: inline-block;
        margin-right: 10px;
      }
      ul li a{
        display: inherit;
        padding: 5px 10px;
        border: 1px solid #ccc;
      }
      ul li a:hover{
        cursor: pointer;
        color: #fff;
        background-color: #138bec;
        border: 1px solid #138bec;
      }
    </style>

rooter-->index.js

import Vue from 'vue'
    import Router from 'vue-router'
    import home from '@/components/home'
    import page01 from '@/components/page01'
    import page02 from '@/components/page02'
    import page01A from '@/components/page01/page01-A'
    import page01B from '@/components/page01/page01-b'
    import pageEnd from '@/components/page01/B/end'
    
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'home',
          component: home
        },
        {
          path: '/home',
          name: 'home',
          component: home
        },
        {
          path: '/page01',
          name: 'page01',
          component: page01,
          children: [
            {
              path: 'page01-a',
              name: 'page01A',
              component: page01A
            },
            {
              path: 'page01-b',
              name: 'page01B',
              component: page01B,
              children: [
                {
                  path: 'end',
                  name: 'pageEnd',
                  component: pageEnd
                }
              ]
            }
          ]
        },
        {
          path: '/page02',
          name: 'page02',
          component: page02
        }
      ]
    })

挑出一个Home.vue看看代码：

<template>
      <div>
        <div class="home text-center">{
        {home}}</div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'home',
        data () {
          return {
            home: '别看了这里啥也没有'
          }
        },
        components: {}
      }
    </script>
    
    <style>
      .home {
        margin-top: 10%;
        font-size: 2.4em;
        font-weight: bold;
      }
    </style>

## 第三步：引入Bootstrap，并使用 ##

![2789632-2f6da06cbdb9d330.png][]

在这里虽然下载，我选择了是cdn。在index.html里添加：

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    
        
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    
        
        <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

在app.vue里添加：

<button type="button" class="btn btn-default">（默认样式）Default</button>
        
        <button type="button" class="btn btn-primary">（首选项）Primary</button>

结果显示：

![2789632-80471a8ab81840d3.png][]

由于在获取数据这一方面还需要研究研究，所以还得花点时间去看看vuede系统点的知识……

[http_www.jianshu.com_p_de410cefd788]: https://www.jianshu.com/p/de410cefd788
[2789632-c5ba56e140ca582c.png]: /images/20210615/d0992851337549adbff6672c18729197.png
[2789632-2808384c4332126c.png]: /images/20210615/f41584cd70884d55a26c6d8cbfd30e4d.png
[2789632-5cc9a7498baacb50.png]: /images/20210615/307db48925a348e08ab52c1469b033da.png
[2789632-5f147dfe2edb51e7.gif]: /images/20210615/321e0072f5cc4e9699071d7f56d47761.png
[2789632-2f6da06cbdb9d330.png]: /images/20210615/0678a39fabc640a68f72d8bfb6534c1e.png
[2789632-80471a8ab81840d3.png]: /images/20210615/abe32bcf52964f7f87b3d89519853c87.png