export default {
computed: {
...mapState(["imgURL"]),
},
// 属性的复杂写法: 可以声明默认值, 应对可选传参
// props: ['type'], //简化写法
props: {
// 属性名:{详细的配置}
type: {
// 通过路径传递的参数, 都是字符串类型
type: String, //类型: String是数字类型
default: "1", //默认值: '1', 如果没传, 则默认是1
},
},
mounted() {
this.getData();
},
data() {
return {
data: null,
};
},
methods: {
getData(page = 1) {
// type: 可选传递, 没有传递则为 undefined, 默认值为1
// 因为 在props中, 指定了默认值, 所以此处不需要再判断
// const type = this.type ?? 1 // ?? 左侧值是false 则用右侧值
const url = `product_select.php?pageNum=${page}&type=${this.type}`;
this.axios.get(url).then((res) => {
console.log(res);
this.data = res.data;
});
},
},
// 监听到路由变化时, 重新发请求
watch: {
$route(newValue, oldValue) {
this.getData();
},
},
};
命名路由
{{i.title}}
取值 消息编号:{{$route.query.id}}--{{$route.query.title}}
嵌套路由
import Vue from 'vue'
import VueRouter from 'vue-router'
// import Login from '../views/Login.vue'
import About from '../views/About.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/pathName',
name: 'routeName',
component: () => import('../views/pathName.vue'),
children: [
{
path: 'p',
component: () => import('../views/News.vue'),
children:[
{
path:'detail',
name:'Detail',
component: () => import('../views/Detail.vue'),
}
],
},
{
path: 'm',
component: () => import('../views/Msg.vue'),
children:[
{
path: 'b',
name: 'routeName',
component: () => import('../views/MsgChildren.vue'),
},
]
},
]
},
{
path: '/about',
component: About
},
// { path: '/', redirect: '/login' },
// {
// path: '/login',
// name: 'Login',
// component: Login
// },
// {
// path: '/home',
// name: 'Home',
// component: () => import('../views/Home.vue'),
// redirect: '/welcome',
// children: [{
// path: '/welcome',
// name: 'Welcome',
// component: () => import("../views/Welcome.vue"),
// },
// {
// path: '/users',
// name: 'Users',
// component: () => import("../components/user/users.vue"),
// },
// ]
// },
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//路由导航守卫
// router.beforeEach((to, form, next) => {
// if (to.path === '/login') { next() }
// 获取token
// const tokenStr = window.sessionStorage.getItem('token')
// if (!tokenStr) {
// next('/login')
// }
// next()
// })
export default router
params路由
{
path: '/pathName',
name: 'routeName',
component: () => import('../views/pathName.vue'),
children: [
{
path: 'p',
component: () => import('../views/News.vue'),
children:[
{
path:'detail/:id/:title?',
name:'Detail',
component: () => import('../views/Detail.vue'),
}
],
},
{
path: 'm',
component: () => import('../views/Msg.vue'),
children:[
{
path: 'b',
name: 'routeName',
component: () => import('../views/MsgChildren.vue'),
},
]
},
]
},
params传参
{{i.title}}
{{i.title}}
路由开启porps
{
path:'detail/:id/:title?',
name:'Detail',
component: () => import('../views/Detail.vue'),
props({qurey:{id,title}}){ //对象解构
return {id,title}
}
props($route){ //对象解构
return {id:$route.params.id,
title:$route.params.title}
}
props({params}){ //对象解构
return {id:params.id,
title:params.title}
}
props({params:{id,title}}){ //对象解构
return {id, title}
}
}
***************************************pages页面*******************
{{id}}
{{title}}
export default {
name:'Detail',
props:['id','title'],
mounted () {
console.log(this.$route)
},
}
编程式路由导航