vue之router的简单使用

1.路由：vue router

    1.集线器（hub），交换机(switcher)，路由器(router)
    2.顶点(位置、资源、URL)-边:（从一个顶点到其他一个顶点，所有的边连接构成的路径
    3.vue核心插件，与vuex类似

2.路由的分类：

    1.基本路由
    2.嵌套路由
    3.动态路由
    4.重定向

3.工程结构如图

main.js

import Vue from 'vue'

// 导入App组件
import App from './App.vue'

// 导入路由插件
import router from './router'

// 导入状态管理插件
import store from './store'

Vue.config.productionTip = false

new Vue({
  
// 注入到 vue 实例中
  router,
  store,
  render: h => h(App)
}).$mount('#app')

index.html(引入BootStrap)

<!doctype html>
<html lang="en">
  <head>
    <title>Title</title>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    
    <div id="app"></div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Nav.vue

<template>
   <div class="jumbotron jumbotron-fluid">
       <div class="container">
           <h1 class="display-3">vue Router| 路由</h1>
           
       </div>
   </div>
</template>

router下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Tech from '../views/Tech.vue'
import Game from '../views/Game.vue'
import User from '../views/User.vue'
import UserDetail from '../views/UserDetail.vue'
// import About from '../views/About.vue'
// import Other from '../views/Other.vue'
import Host from '../views/game/Host.vue'
import PC from '../views/game/PC.vue'
import Mobile from '../views/game/Mobile.vue'


Vue.use(VueRouter)

// 定义路由规则
// 添加自定义路由规则
// 动态路由 /path/:参数
const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/tech',
    component: Tech,

    // 
    // components:{
    //     nav:Tech,
    //     default:Home
    // }
  },

  // 嵌套路由
  {
    path: '/game',
    component: Game,
    children: [
      // 嵌套路由的默认路径
      {
        path: '/',
        component: PC
      },
      {
        path: 'host',
        component: Host
      },
      {
        path: 'pc',
        component: PC
      },
      {
        path: 'mobile',
        component: Mobile
      }
    ]
  },
// 用户

  {
    path: '/user',
    component: User
  },

  // 用户详情：动态路由（参数）
  //  props:true 启用通过组件的属性传递路由参数
  {
    path: '/user/:id',
    name: 'info',
    component: UserDetail,
    props:true
  },
]

// 创建了 router 实例
const router = new VueRouter({
  // 路由规则
  routes: routes
  // routes
})

// 导出router实例
export default router

store下的index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    users:[
      {
        id:100,
        name:'alice',
        
      },
      {
        id:200,
        name:'bob',

      },
      {
        id:300,
        name:'jack',

      }
    ]
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

game文件夹的Host.vue

<template>
   <div class="jumbotron">
       <h1 class="display-3">主机</h1>
       
   </div>
</template>

game文件夹的Mobile.vue

<template>
   <ul class="list-group">
       <li class="list-group-item active">Active item</li>
       <li class="list-group-item">Item</li>
       <li class="list-group-item disabled">Disabled item</li>
   </ul>
</template>

game文件夹的PC.vue

<template>
    <div class="card text-left">
   
      <div class="card-body">
        <h4 class="card-title">pc游戏</h4>
        <p class="card-text">Body</p>
      </div>
    </div>
</template>

view文件夹下的Game.vue

<template>
  <div>
    <!-- <h1 class="text-center">开发中....</h1>
    <div class="progress">
      <div
        class="progress-bar"
        role="progressbar"
        style="width: 25%;"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
      >Description</div>
    </div> -->

    <!-- 导航 -->
    <ul class="nav justify-content-center">
        <li class="nav-item">
            <!-- <a class="nav-link active" href="#">Active link</a> -->
            <router-link class="nav-link" to="/game/host">主机</router-link>
        </li>
        <li class="nav-item">
            <!-- <a class="nav-link" href="#">Link</a> -->
            <router-link class="nav-link" to="/game/pc">PC</router-link>
        </li>
        <li class="nav-item">
            <!-- <a class="nav-link disabled" href="#">Disabled link</a> -->
            <router-link class="nav-link" to="/game/mobile">手机</router-link>
        </li>
    </ul>


    <!-- <nav class="breadcrumb">
      <a class="breadcrumb-item" href="#"></a>
      <a class="breadcrumb-item" href="#"></a>
      <span class="breadcrumb-item active"></span>
    </nav> -->

    <!-- 显示的区域 -->
    <router-view/>

  </div>
</template>

view文件夹下的Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>

view文件夹下的Other.vue

<template>
    <div>
        <ol>
            <li>os</li>
            <li>db</li>
            <li>lang</li>
        </ol>
    </div>
</template>


<script>
export default {
    name:'Other'
}
</script>

view文件夹下的Tech.vue

<template>
<div class="card text-left">
  <img class="card-img-top" src="holder.js/100px180/" alt="">
  <div class="card-body">
    <h4 class="card-title">Title</h4>
    <p class="card-text">Body</p>
  </div>
</div>
</template>

view文件夹下的User.vue

<template>
  <table class="table">
    <thead>
      <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>动态路由的连接</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item, index) in users" :key="index">
        <td>{{item.id}}</td>
        <td>{{item.name}}</td>
        <td>
          <!-- <router-link :to="'/user/'+item.id">{{item.id}}</router-link> -->
         <!-- 路由的命名 -->
         <!-- name:路由的名字 -->
         <!-- params:参数 -->
         <!-- 根据上述的参数渲染一个超链接 -->
          <router-link :to="{name:'info' ,params:{id:item.id}}">{{item.id}}</router-link>
        </td>
      </tr>
    </tbody>
  </table>
</template>


<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["users"])
  }
};
</script>

view文件夹下的UserDetail.vue

<template>
    <div class="jumbotron">
        <!--  -->
        <!-- <h1 class="display-3">用户：{{$route.params.id}}</h1> -->
       <!-- 路由参数通过属性传递 -->
        <h1 class="display-3">用户：{{id}}</h1>
        <p class="lead">Jumbo helper text</p>
       
    </div>
</template>


<script>
export default {
    props:['id']
}
</script>

App.vue

<template>
  <div id="app">
    <!-- 展板，导航 -->
    <Nav />
    <!-- 可以存在多个视图，要命名 -->
      <!-- <router-view  name="nav"/> -->
    <!-- 全屏容器 -->
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-4">
          <!-- 列表 -->
          <ul class="list-group">
            <li class="list-group-item">
              <router-link to="/">新闻</router-link>
            </li>
            <li class="list-group-item">
              <router-link to="/tech">科技</router-link>
            </li>
            <li class="list-group-item">
              <router-link to="game">游戏</router-link>
            </li>
            <li class="list-group-item">
              <router-link to="user">用户</router-link>
            </li>
            <li class="list-group-item">
              <router-link to="user/123">用户123</router-link>
            </li>
            <li class="list-group-item">
              <router-link to="user/456">用户456</router-link>
            </li>
          </ul>
        </div>
        <div class="col-lg-8">
          <!-- router-link显示的位置 -->
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

// 脚本
<script>
import Nav from "./components/Nav";
export default {
  name: "App",
  components: {
    Nav
  }
};
</script>

界面如图所示

爷叼烟闯天下

发布了113 篇原创文章 · 获赞 130 · 访问量 1万+

私信关注

vue之router的简单使用

1.路由：vue router

2.路由的分类：

3.工程结构如图

main.js

index.html(引入BootStrap)

HelloWorld.vue

Nav.vue

router下的index.js

store下的index.js

game文件夹的Host.vue

game文件夹的Mobile.vue

game文件夹的PC.vue

view文件夹下的Game.vue

view文件夹下的Home.vue

view文件夹下的Other.vue

view文件夹下的Tech.vue

view文件夹下的User.vue

view文件夹下的UserDetail.vue

App.vue

界面如图所示

猜你喜欢