vue---路由嵌套3（1 2 3的综合）--demo（首页、列表页、用户中心）

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import Home from './pages/Home'

Vue.config.productionTip = false
Vue.use(VueRouter) // 使用路由

// 定义一个路由实例
const router = new VueRouter({
  routes: [
    {
      path: '/', // 路径，就是url中访问的地址
      name: 'H', // 名字，就是我为这个路由设置一个名字
      component: Home, // 组件，当浏览器中访问对应的地址时展示的内容
    },
    {
      path: '/list',
      name: 'L',
      // 异步方式引入的路由组件会在打包的时候生成单独的js文件
      //  在使用的时候才会被加载
      //  此方法主要用来做性能优化
      component: () => import('./pages/List'), // 异步引入路由,当访问到此地址的时候才会引入文件
    },
    {
      // 使用params传参的时候建议在路由中配置占位符，目的是刷新之后参数还在
      //  参数名后面加?表示是可选参数
      path: '/detail/:p/:age?',
      name: 'Detail',
      component: () => import('./pages/Detail'),
    },
    {
      path: '/user',
      component: () => import('./pages/User'),
      // 子组件的path不要加/，因为它是要把父组件的path和子组件的path拼到一起的
      children: [
        {
          path: 'info',
          name: 'UI',
          component: () => import('./pages/User/Info'),
        },
        {
          path: 'pwd',
          name: 'UPWD',
          component: () => import('./pages/User/ChangePwd'),
        },
        {
          path: 'score',
          name: 'UScore',
          component: () => import('./pages/User/Score'),
        },
        {
          path: 'orders',
          name: 'UOrder',
          component: () => import('./pages/User/Orders'),
        },
      ],
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('./pages/Login'),
    },
    {
      path: '*',
      component: () => import('./pages/NotFound'),
    },
  ], // 表示路由配置表,
})

new Vue({
  router, // router: router
  render: (h) => h(App),
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png" />
    <!-- 是路由中的内置组件，用来生成a标签 -->
    <router-link :to="{name: 'H'}">【首页】</router-link>
    <router-link :to="{name: 'L'}">【列表】</router-link>
    <router-link :to="{name: 'UI'}">【用户中心】</router-link>
    <hr />
    <!-- 是用来展示组件的内容的. 路由跳转之后的组件页面内容都在此处进行展示 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {}
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

user.vue

<template>
  <div class="user">
    <div class="left">
      <router-link :to="{name: 'UI'}">用户信息</router-link>
      <router-link :to="{name: 'UPWD'}">修改密码</router-link>
      <router-link :to="{name: 'UOrder'}">我的订单</router-link>
      <router-link :to="{name: 'UScore'}">我的积分</router-link>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    // if {

    // }
    if (localStorage.getItem('token')) {
      // 已经登录
    } else {
      // 没有登录
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>

<style>
.user {
  display: flex;
}
.user .left {
  width: 160px;
  display: flex;
  flex-direction: column;
}
.user .right {
  flex: 1;
  border: solid 0.02rem orangered;
}
</style>

List.vue

<template>
  <div class="home">
    <h1>我是列表页</h1>
    <ul>
      <li v-for="item in list" :key="item.id">
        <!-- query传参可以在url中传递，可以传递多个。刷新页面之后参数还在 -->
        <!-- params传参不会再url中显示，当浏览器刷新之后参数消失。
        如果想让参数一直存在，需要在路由中配置占位符-->
        <router-link
          :to="{name: 'Detail',
            query: {
              id: item.id,
              name: item.name,
              r: Math.random()
            },
            params: {
              p: '小智',
              age: 8,
              skills: '暂无'
            }}"
        >{{item.name}}</router-link>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: '沈剑心' },
        { id: 2, name: '郭德友' },
        { id: 3, name: '郭德纲' }
      ]
    }
  }
}
</script>
<style scoped>
.home {
  background-color: orange;
}
</style>

NotFound

<template>
  <div class="pnf">
    <h1>404</h1>
    <button @click="backHome">返回首页</button>
  </div>
</template>
<script>
export default {
  methods: {
    backHome() {
      // 通过$router.push() // 跳转到指定的路由地址
      // this.$router.push('/')
      this.$router.push({
        name: 'H'
      })
    }
  }
}
</script>

Login.vue

<template>
  <div class="login">
    <button @click="loginHandle">登录</button>
  </div>
</template>
<script>
export default {
  methods: {
    loginHandle() {
      localStorage.setItem('token', '123')
      this.$router.push({
        name: 'UI'
      })
    }
  }
}
</script>

Detail.vue

<template>
  <div class="container">
    <h5>详情</h5>
    <!-- query表示url中传参 -->
    <p>当前的id值为:{{$route.query.id}}</p>
  </div>
</template>

<script>
export default {
  created() {
    console.log(this.$route) // 输出当前的路由信息，显示一下参数
  }
}
</script>

<style>
</style>

Home.vue

<template>
  <div class="home">
    <h1>我是首页</h1>
  </div>
</template>
<style scoped>
.home {
  background-color: orange;
}
</style>

Info.vue\Orders.vue\ChangePwd.vue\Score.vue
都是这样的写法，就是中文文字按照对应的名称修改一下

<template>
  <div class="user">
    <h1>个人信息</h1>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
</style>

```一些配置文件`**