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 to="/Page">去Pagerouter-link>
    p>
    
    <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
                }
          ]
        }
    ]
})