Vue笔记3 vue-cli单页面应用与路由设置

1.准备，安装webpack和vue-cli，根据官网教程构建项目。搭建好的项目如下：

2.配置路由
1). 在components中创建Page.vue，在router中的index.js中配置路由。

import Vue from "vue"
//1.导入路由组件vue-router
import Router from "vue-router"
import Hello from "@/components/Hello"
import Page from "@/components/Page"
//2.调用vue-router
Vue.use(Router)
//3.创建vue-router实例
const router=new Router({
  routes: [
    {
      path: "/",
      component: Hello
    },
    {
      path: "/Hello",
      component: Hello
    },
    {
      path: "/Page", //路径
      name: "Page", //名称
      component: Page //组件
    }
  ]
});
export default route;

2). 在入口文件中配置路由，这里的入口文件是main.js

import Vue from "vue"
//导入路由
import router from "./router/index.js"

new Vue({
  el: "#app",
  router,//配置路由
})

3).使用 router-link设置链接，使用router-view展示信息

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <p>
        <!-- router-link设置链接 -->
        <router-link to="/Page">去Page</router-link>
    </p>
    <!-- router-view展示信息 -->
    <router-view></router-view>
  </div>
</template>

3.动态路由
使用：开头设置动态路径

new Router({
    routes:[
        {
          path: "user/:id",
          name: "user",
          component: user
        }
    ]
})

router-link写法如下

<router-link :to="{name:"user", params:{id: "123"}}">姓名</router-link>

渲染出/user/123，使用$route.params.id获取id

4.嵌套路由
/User/userName

new Router({
    routes:[
        {
          path: "/User",
          name: "User",
          component: User,
          children: [
                {
                  path: "userName",
                  name: "userName",
                  component: userName
                }
          ]
        }
    ]
})