Vue预习篇（九）路由vue-router

路由
安装
vue add router

起步
路由规划、配置，router/index.js
商品列表（home） - 商品管理（about）

路由出口、导航，App.vue

<nav>
	<router-link to="/">首页</router-link>
	<router-link to="/about">管理</router-link>
</nav>
<router-view></router-view>

商品管理，About.vue

<template>
    <div>
        <message ref="msgSuccess" class="success">
            <!-- 命名为title插槽内容 -->
            <template v-slot:title="slotProps">
                <strong>{{slotProps.title}}</strong>
            </template>
            <!-- 默认插槽内容 -->
            <template v-slot:default></template>
        </message>
        <message ref="msgWarning" class="warning">
            <!-- 命名为title插槽内容 -->
            <template ref="msgWarning" class="warning">
                <!-- 命名为title插槽内容 -->
                <template>
                    <strong>警告</strong>
                </template>
                <!-- 默认插槽内容 -->
                <template v-slot:default>请输入课程名称！</template>
            </template>
        </message>
        <cart-add v-model="course" @add-course="addCourse"></cart-add>
        <course-list :couurses="courses"></course-list>
    </div>
</template>
<script>
import CartAdd from "@/components/CartAdd.vue";
import CourseList from "@/components/CourseList.vue";
import Message from "@/components/Message.vue";
import { getCourses } from "@/api/course";

export default {
    name: "app",
    data() {
        return {
            course: '',
            courses: []
        }
    },
    components: {
        CartAdd,
        CourseList,
        Message
    },
    async created() {
        // 组件实例已创建，由于未挂载，dom不存在
        const courses = await getCourses();
        this.courses = courses;
    },
    methods: {
        addCourse() {
            if(this.course) {
                // 添加course到数组
                this.courses.push({name: this.course, price: 8999});
                this.course = "";
                // 显示提示信息
                // this.show = true
                this.$refs.msgSuccess.toggle();
            } else {
                // 显示错误信息
                // this.showWarn = true
                this.$refs.msgWarning.toggle();
            }
        }
    }
}
</script>

动态路由匹配
我们疆场需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个User组件，对所有ID各不相同的用户，都要使用这个组件来渲染。那么，我们可以在Vue-router的路由路径中使用“动态路径参数”(dynamic segment)来达到这个效果：

{ path: '/user/:id', component: User }

范例：查看课程详情，views/Detail.vue

<div>
	<h2>detail page</h2>
	<p>{{$route.params.name}}...</p>
</div>

router/index.js

{
		path: '/course/:name',
		component: () => import('../views/Detail.vue')
}

列表中的导航，About.vue

<router-link :to="`/course/${c.name}`">
	{{c.name}} = {{c.price | currency('￥')}}
</router-link>

通配符
适合做404页面路由

{
	// 会匹配所有路径
	path: '*',
	component: () => import('../views/404.vue')
}

嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样的，URL中各段动态路径也按某种结构对应嵌套的各层组件，例如：

/user/foo/profile             /user/foo/posts
+------------------+          +-----------------+
| User             |          | User            |
| +--------------+ |          | +-------------+ |
| | Profile      | | +----->  | | Posts       | |
| |              | |          | |             | |
| +--------------+ |          | +-------------+ |
+------------------+          +-----------------+

范例：嵌套方式显示课程详情

<router-link :to="`/about/${c.name}`">
	{{ c.name }} - {{ c.price | currency('￥') }}
</router-link>
<router-view></router-view>

路由配置

{
	path: '/about',
	name: 'about',
	component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
	children: [
		{
			path: 'name',
			component: () => import('../views/Detail.vue')
		}
	]
}

响应路由参数变化，Detail.vue

export default {
	watch: {
		$route: {
			handler: () => {
				console.log('$route change')
			},
			immediate: true
		}
	}
}