vue3学习笔记—vue-router（2）

嵌套路由

 src/App.vue

    <router-link to="/parent">Go to Parent</router-link>

src\router\index.js

{
        path: '/parent', 
        component: Parent,
        children: [
            {
                path: "styleone",
                component: StyleOne
            },
            {
                path: "styletwo",
                component: StyleTwo
            }
        ]//其他子路由
    },

 src\views\Parent.vue

<template>
    <div>
        <h2>父组件Parent</h2>
        <router-link to="/parent/styleone">样式一</router-link>
        <router-link to="/parent/styletwo">样式二</router-link>
        <router-view></router-view>
    </div>
</template>

 src\views\StyleOne.vue

<template>
    <div>
        <p>样式一</p>
        <ol>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ol>
    </div>
</template>

 src\views\StyleTwo.vue

<template>
    <div>
        <p>样式二</p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</template>

通过js跳转页面

src/App.vue

<router-link to="/page">Go to Page</router-link>

src\router\index.js

import Page from '../views/Page.vue'

{ path: '/page', component: Page },

 src\views\Page.vue

<template>
    <h2>Page页面</h2>
    <div><button @click="goPage">跳转页面</button></div>
</template>
<script>
export default{
    methods:{
        goPage:function(){
            // console.log(this.$router);
            // this.$router.push('/')//跳转Home界面

            // if(123==123){
            //     this.$router.push('/')
            // }

            //通过传入对象
            // this.$router.push({path:'/'})

            //带参数
            // this.$router.push({path:'/user/123456'})
            
            // this.$router.push({name:"news",params:{id:123}})

            //带问号
            this.$router.push({path:"/about",query:{name:"zhangsan"}})
        }
    }
}
</script>

替换页面及页面前进后退

src/App.vue

  <router-view name="ShopTop"></router-view>
  <router-view></router-view>
  <router-view name="ShopFooter"></router-view>

 src\views\Page.vue

//替换当前位置两种方法
this.$router.push({path:"/about",query:{name:"zhangsan"},replace:true})

// this.$router.replace({path:"/about",query:{name:"zhangsan"}})

 src\views\About.vue

<template>
    <div>About</div>
    <button @click="goBack">后退</button>
</template>
<script>
export default{
    mounted(){
        console.log(this.$route.query.name);
    },
    methods: {
        goBack(){
            //go(),前进传入正值，后退传入负值
            this.$router.go(-1)
            //this.$router.back()//后退，等于go（-1），无法传参数
            //this.$router.forward()//前进，等于go（1），无法传参数

        }
    },
}
</script>

重定向和别名

index.js

import { createRouter, createWebHashHistory } from 'vue-router'
// 1. 定义路由组件.
// 也可以从其他文件导入
import Home from '../views/Home.vue'
import NotFound from '../views/NotFound.vue'
import Parent from '../views/Parent.vue'
import StyleOne from '../views/StyleOne.vue'
import StyleTwo from '../views/StyleTwo.vue'


// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
const routes = [
    {
        path: '/',
        //重定向
        // redirect: '/home',

        //命名路由
        // redirect: {name:"home"},

        //方法
        redirect:(to)=>{
            // console.log(to);
            return{path:"/home"}
        }
    },

    { path: '/home', name:"home",component: Home },

    {
        path: '/parent',
        alias: ['/father','fuqin'],//起别名
        component: Parent,
        children: [
            {
                path: "styleone",
                component: StyleOne
            },
            {
                path: "styletwo",
                component: StyleTwo
            }
        ]//其他子路由
    },


    //404页面
    //使用正则的方式,匹配任意的
    { path: '/:path(.*)', component: NotFound },
]
// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
    // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
    history: createWebHashHistory(),
    routes, // `routes: routes` 的缩写
})
export default router

路由组件传参

index.js

{
        path: '/shop/:id', 
        components: {
            default: ShopMain,
            ShopTop: ShopTop,
            ShopFooter: ShopFooter,
        },
        props:{default:true,ShopTop:false,ShopFooter:false}
    },//components,加s

 src\views\User.vue

<template>
    <div>User</div>
</template>

//vue2  
<!-- <script>
export default{
    props:['id'],
    mounted(){
        //$route表示当前活跃的路由对象
        console.log(this.$route.params.id);
        console.log(this.id);
    }
}
</script> --> 

//组合式API
<script setup>
    import { useRoute } from 'vue-router';
    console.log(useRoute().params.id);
    const props=defineProps({
        id:String
    })
    console.log(props);
</script>

 src\views\ShopMain.vue

<template>
    <h2>Shop内容</h2>
</template>
<script>
export default{
    props:['id'],
    mounted(){
        console.log(this.id);
    }
}
</script>