VUE-router

可重用的内容可以保存在src / components文件夹中
与路由器绑定的内容可以保存在src / views中

使用不同的路由来显示不同的页面

image.png

一个路由对应一个VUE文件

image.png

• 第一种页面会将所有页面引入进来
• 第二种是懒加载（也就是说用户有没有去访问你这个about路由，按需去引入，如果访问了就引入）

所以我们一般首页都用第一种方式来做，因为这样用户的访问速度更快

当然第二种方法里面的注释并不是没有用处的，他是在用webpack打包的时候取的名字

---

完成以上路由的配置,我们需要将路由搭载到页面中,

image.png
router-link标签是路由的链接(可以理解为a标签)
router-view 显示对应路由的内容

也可以使用name名字来代替/的写法

<router-link :to="{name:'Message'}">Messgae</router-link>

也可以将上方nav专门放在一个组件中,如下的AppNav组件中,并挂载到app主组件上

image.png appnav组件代码

动态路由

比如当我们文章页里的文章很多时，我们不可能一个文章就写对应的一个路由，那么就要使用我们的动态路由了
写法路由：

 {
    path: '/article/:id',//动态路由
    name: 'ArticleId',
    component:()=>import('../views/ArticleId.vue')
  }

<li><router-link to="/article/1">第一篇文章</router-link></li>
    <li><router-link to="/article/2">第二篇文章</router-link></li>
    <li><router-link to="/article/3">第三篇文章</router-link></li>

当如何拿到动态路由的id呢,就需要用到this.$route.params.id来获取到动态路由的参数,并知道是那个文章

  <div>
    <h1>{{title}}</h1>
  
  </div>
</template>

<script>
export default {
    data(){
        return{
            title:"文章标题"
        }
    },
  created(){
    let id = this.$route.params.id
    //根据id查询文章对应信息
    // ajax
    this.title = '这是第'+id+'篇文章'
                         
  }
}

例

也就是当结构相同,只是文章里面对应的内容不一致时,需要使用动态路由来处理更加便捷