1.路由使用
一个项目跟一个页面开发不太一样
一个页面只需要考虑到这个页面的结构、样式、以及对应的行为js就行。
但一个项目我们要考虑更多的是整个的路由、包括App.vue文件的结构分配。
搭建、结构分配
image.png
<template>
<!-- 移动端-->
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</div>
<router-view></router-view>
<!-- 路由出口 -->
<div></div>
<!-- 底部导航 -->
</div>
</template>
<template>
<div id="app">
<!-- PC端 结构分为登录页和内容展示页：所以App.vue展示的内容就不是固定的,相对于只有一个路由展示， 一个路由就是一个对应的页面-->
<router-view />
</div>
</template>
<!-- 路由-->
routes: [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/city",
name: "City",
component: City
}
],
聊一聊全局组件 App.vue
<template>
<div id="app">
<h1>我是固定的，在每一个页面都有</h1> <!-- 每一个页面都会展示的内容 -->
<router-view></router-view> <!-- 展示router/index.js路由配置对应的页面 -->
</div>
</template>
<script>
export default {
name: "App",
// components: {
// HelloWorld,
// },
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
router/index.js
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "../components/HelloWorld";
import Detail from "../components/Detail";
Vue.use(Router);
export default new Router({
routes: [
{
path: '/', redirect: '/index'
},
{
path: "/index",
name: "HelloWorld",
component: HelloWorld
},
{
path: "/detail",
name: "Detail",
component: Detail
}
]
})
2.路由嵌套 和 路由拦截 和 路由监听
import Vue from "vue";
import Router from "vue-router";
import Login from "../components/Login";
import Detail from "../components/Detail";
import Index from "../components/Index/Index.vue";
import Stats from "../components/Stats/Stats.vue";
import wmsList from "../components/wms/wmsList.vue";
import wmsEch from "../components/wms/wmsEch.vue";
import userList from "../components/user/userList.vue";
import Wms from "../components/Wms.vue";
import User from "../components/User.vue";
Vue.use(Router);
const router = new Router({
routes: [
{
path: '/', redirect: '/login'
},
{
path: "/login",
name: "Login",
component: Login,
meta: { title: '登录' }
},
// 一级路由
{
path: "/detail",
name: "Detail",
component: Detail,
redirect: "/Index",
meta: { title: '首页' },
// 二级路由：在首页下面展示，并没有跳转到一个新的页面
children: [
{
path: "/Index",
name: "Index",
component: Index,
meta: { title: '首页' }
},
{
path: "/Stats",
name: "Stats",
component: Stats,
meta: { title: '数据统计' }
},
{
path: "/wms",
name: "Wms",
component: Wms,
meta: { title: '信息管理' },
children: [
{
path: "/wms/list",
name: "wmsList",
component: wmsList,
meta: { title: '列表展示' }
},
{
path: "/wms/ech",
name: "wmsEch",
component: wmsEch,
meta: { title: '图标展示' }
},
]
},
{
path: "/user",
name: "User",
component: User,
meta: { title: '用户管理' },
children: [
{
path: "/user/list",
name: "userList",
component: userList,
meta: { title: '用户统计' }
},
]
}
]
}
],
})
// 路由拦截
router.beforeEach((to, from, next) => {
if (!sessionStorage.getItem('userName')) {
if (to.path !== '/login') {
next('/login')
}
}
next()
})
export default router
watch: {
// 路由监听
$route() {
this.list = this.$route.matched;
},
},
3.参数传递
项目中很多情况下都需要进行路由之间的传值，想过很多种方式
sessionstorage/localstorage/cookie 进行离线缓存存储也可以，用vuex也可以，不过有些大材小用吧，不管怎么说因场景而异
下面我来说下vue自带的路由传参的三种基本方式
先有如下场景 点击当前页的某个按钮跳转到另外一个页面去，并将某个值带过去
<li
@click="goDetail(item.id)"
class="item border-bottom"
v-for="item of list"
:key="item.id"
>
<img class="item-img" :src="item.imgUrl" alt="图片" />
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看详情</button>
</div>
</li>
第一种方法 手写完整的path，页面刷新数据不会丢失
methods: {
goDetail(id) {
this.$router.push({
path:`/detail/${id}`
})
}
},
需要对应路由配置如下：
routes: [
{
path: "/detail/:id",
name: "Detail",
component: Detail
}
],
可以看出需要在path中添加/:id来对应 $router.push 中path携带的参数。在子组件中可以使用来获取传递的参数值
另外页面获取参数如下
id: this.$route.params.id
温馨提示：或者用router-link 标签跳转，当用标签跳转时如下，对应路由配置 和 页面获取参数 同上
<router-link
tag="li"
:to="'/detail/'+item.id"
class="item border-bottom"
v-for="item of list"
:key="item.id"
>
<img class="item-img" :src="item.imgUrl" alt="图片" />
<div class="item-info">
<p class="item-title">{{item.title}}</p>
<p class="item-desc">{{item.desc}}</p>
<button class="item-button">查看详情</button>
</div>
</router-link>
第二种方法 params传递，页面刷新数据会丢失（params传递会把参数携带在URL后面，而query传递不会）
通过路由属性中的name来确定匹配的路由，通过params来传递参数。
methods：{
insurance(id) {
this.$router.push({
name: 'Detail',
params: {
id: id
}
})
}
对应路由配置: 注意这里不能使用:/id来传递参数了，因为组件中，已经使用params来携带参数了。
{
path: '/detail',
name: 'Detail',
component: Detail
}
子组件中: 这样来获取参数
id:this.$route.params.id
第三种方法 query传递：
使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
methods：{
insurance(id) {
this.$router.push({
path: '/detail',
query: {
id: id
}
})
}
对应路由配置：
{
path: '/particulars',
name: 'Detail',
component: Detail
}
对应子组件: 这样来获取参数
id:this.$route.query.id
特别注意哦，
组件中 获取参数的时候是route.params 而不是router 这很重要~~~
网友评论