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>