Vue-cli4.0路由的配置

1.首先需要先安装路由

可以在ui界面安装也可以npm


2.创建router.js文件并写好
注意点：
（1）子路由不需要再写/
（2）如果需要传值 path写成 path: ‘product/:id’,形式
（3）一般都写一个home父模板 其他往里填

// 拉取依赖
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
// 引入所需文件
import Home from './pages/home.vue';
import Login from './pages/login.vue';
import Logout from './pages/logout.vue';
import Index from './pages/index.vue';
import Product from './pages/product.vue';
import Order from './pages/order.vue';

export default new VueRouter({
     
    routes: [
        {
     
            path: '/',
            name: 'home',
            component: Home,
            redirect: '/index',
            children: [
                {
     
                    path: 'index',
                    name: 'index',
                    component: Index,
                }
                ,
                {
     
                    path: 'login',
                    name: 'login',
                    component: Login,
                },
                {
     
                    path: 'logout',
                    name: 'logout',
                    component: Logout,
                },
                {
     
                    path: 'product/:id',
                    name: 'product',
                    component: Product,
                }
            ]
        },
        {
     
            path: '/order',
            name: 'order',
            component: Order,
        }

    ]
})

3.各个小文件代码
顺序如下：

//home
<template >
  <!-- <div>我是主页面</div> -->
  <router-view>
    <div>123</div>
  </router-view>
</template>
<script>
export default {
     
  name: "home",
};
</script>

<template >
  <div>
    我是主页面
    <button @click="fn">跳转到登录页面</button>
  </div>
</template>
<script>
export default {
     
  name: "index",
  methods: {
     
    fn() {
     
      //   console.log(123);
      this.$router.push("/login");
    },
  },
};
</script>

<template >
  <div>
    我是登录页面
    <button @click="fn">跳转到商品页面</button>
  </div>
</template>
<script>
export default {
     
  name: "login",
  methods: {
     
    fn() {
     
      //   console.log(123);
      this.$router.push("/product/14");
      //这里如果是a链接需要加除了网址后面所有的
    },
  },
};
</script>

<template >
  <div>我是登出页面</div>
</template>
<script>
export default {
     
  name: "logout",
};
</script>

<template >
  <div>我是订单页面</div>
</template>
<script>
export default {
     
  name: "order",
};
</script>


<template >
  <div>我是商品页面</div>
</template>
<script>
export default {
     
  name: "product",
};
//  //通过这种方式获取路由传递的id
// let id = this.$route.params.id;
</script>