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

使用路由支持开发单页应用

在开发Vue.js应用时，我们常常需要处理组件间的数据传递和页面导航。本文将详细介绍如何使用Vue Router开发单页应用，包括组件间数据传递、路由配置、产品列表展示等内容。

组件属性与数据传递

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

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

这是使用 @Prop() 属性级装饰器声明 HelloWorld 组件接受一个 msg 属性。另一种方式是使用 @Component() 装饰器的 props 属性：

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

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

使用 pro