35、开发支持路由的单页应用

开发支持路由的单页应用

在开发 Vue 应用时，我们常常会用到单页应用（SPA），并且需要路由支持来实现页面导航。下面将详细介绍如何开发支持路由的单页应用。

组件属性传递与事件触发

在 Vue 组件中，我们可以为属性提供默认值。例如，为 msg 属性提供默认值的代码如下：

@Prop({default: "The message will go here"}) private msg: string;

Vue CLI 生成的代码使用 @Prop() 属性级装饰器来声明 HelloWorld 组件接受一个属性 msg 。另一种方式是使用 @Component() 装饰器的 props 属性，示例代码如下：

@Component({
    props: {
        msg: {
            default: "The message will go here"
        }
    }
})
export default class HelloWorld extends Vue { }

如果父组件没有为 msg 属性赋值，例如 <HelloWorld /> ，则会渲染默认属性值