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>

技术
©2019-2020 Toolsou All rights reserved,
Vue.js入门(五)---在vue中使用echarts词云Pandas统计分析基础_数据处理(DataFrame常用操作)element UI dialog点击dialog区域外会关闭dialog应届毕业生看过来!Java面试经典77问,看完离工作就不远了关于蓝桥杯大赛,你应该了解的那些事!mysql 分区-key分区(五)海康威视-嵌入式软件笔试题PHP Redis 监听过期的 key 事件C语言循环语句笔记详解以及练习-折半查找算法、猜数字游戏JVM概述