vue-router使用简单demo

偏执的太偏执、 2022-11-12 08:22 151阅读 0赞

> `vue-router使用简单demo`

> ## 1.首先安装`vue-router` ##

npm install vue-router -s

> ## 2.创建两个简单视图vue ##

![在这里插入图片描述][20210323103740978.png]

> ## 3.在`src`目录下配置`路由表` ##

import home from "./views/home";
    import product from "./views/product";
    
    
    
    export const routes = [
      { 
        path: "/home",
        component: home
      },
      { 
        path: "/product",
        component: product
      }
    ]

> ## 4.在`main.js`中引入路由模块，引入静态路由表，使用路由模块，创建一个VueRouter模块的实例，把router实例放入到vue实例中 ##

import Vue from 'vue'
    import App from './App.vue'
    import VueRouter from "vue-router";//1.引入路由模块
    import { routes} from "./routes"//2.引入静态路由表
    
    Vue.use(VueRouter);//3.使用路由模块
    //创建一个VueRouter模块的实例
    let router = new VueRouter({ 
      routes: routes
    });
    
    
    new Vue({ 
      el: '#app',
      router,//5.把router实例放入到vue实例中
      render: h => h(App)
    })

> ## 在`app.vue`里面简单测试路由的跳转 ##

<template>
      <div id="app">
        <span>
           <router-link to="/home">首页</router-link>
        </span>
        <span>
           <router-link to="/product">商品列表</router-link>
        </span>
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default { 
      name: 'app',
      data() { 
        return { 
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style>
    
    </style>

[20210323103740978.png]: /images/20221022/7aa4e3e0573e4a3aadc9e79b95df905c.png