vue小项目总结与笔记【二】——vue的单文件组件模板和路由

vue的单文件组件的基本构成是这样的：

<template>
    <div>
       结构： （注意：template里只能有一层div，不能出现两个并列的div ）
    </div>
</template>

// 逻辑
<script>
export default {
    name: '组件名'
}
</script>

// css样式
<style lang="">
    
</style>

项目打包完成后，可以看到main.js里有这样的一段：

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

也就是说，项目的根实例为 <div id="app"></div>

再看App.vue文件：

<template>
  <div id="app">
      <router-view/>
  </div>
</template>

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

<style>

</style>

这里的router-view显示的是当前路由的地址所对应的内容

如果去掉router-view，页面就是空白的

那，路由（router）是什么？

字面意思是，根据网址的不同，返回不同的内容给用户，例如，访问根路径‘/’,就访问主页，访问‘/list’，那就访问列表页

 

 

路由的配置都放在router文件夹下的index.js文件里：

export default new Router({
  routes: [{
　　  // 当用户访问根路径‘/’的时候，展现给用户的是Home这个组件
      path: '/',
      name: 'Home',
      component: Home
    }, {
　　　 // 当用户访问根路径‘/city’的时候，展现给用户的是City这个组件

　　　　path: '/city',
　　　　name: 'City',
　　　　component: City }]

 当你创建一个新组件，需要进行路由配置的时候，在routes里面添加就好了：

export default new Router({
  routes: [{
　　  // 当用户访问根路径‘/’的时候，展现给用户的是Home这个组件
      path: '/',
      name: 'Home',
      component: Home
    }, {
　　　 // 当用户访问根路径‘/city’的时候，展现给用户的是City这个组件
　　　　path: '/city',
　　　　name: 'City',
　　　　component: City 
    }, {
　　　 // 
　　　　path: '/detail',    // 路径
　　　　name: 'Detail',    // 路由名
　　　　component: Detail  //组件名
    }]

并在上面import引入 就可以了