Vuejs路由1二十一

最新推荐文章于 2024-11-11 23:32:58 发布

米白蓝

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量159

点赞数

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_50563868/article/details/124583960

版权

Vuejs 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<--!app.vue-->
<template>
  <div>
    <div class="row">
      <banner/>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- <a href="./about.html" class="list-group-item active">About</a>
          <a href="./home.html" class="list-group-item">Home</a> -->
          <router-link to="/about" class="list-group-item" active-class="active">About</router-link>
          <router-link to="/home" class="list-group-item" active-class="active">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="paner-body">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<--!home.vue-->
<template>
  <div>
    <h2>我是Home的内容</h2>
  <div>
    <ul class="nav nav-tabs">
      <li>
        <router-link class="list-group-item" active-class="active" to="/home/news">News</router-link>
      </li>
      <li>
        <router-link class="list-group-item" active-class="active" to="/home/message">Message</router-link>
      </li>
    </ul>
    <router-view></router-view>
  </div>
  </div>
</template>

<--!message.vue-->
<template>
  <div>
    <ul>
      <li>
        <a href="#">message001</a>&nbsp;&nbsp;
      </li>
      <li>
        <a href="#">message002</a>&nbsp;&nbsp;
      </li>
      <li>
        <a href="#">message003</a>&nbsp;&nbsp;
      </li>
    </ul>
  </div>
</template>

//roue/index.js
import vueRouter from 'vue-router'
import Home from '../pages/Home'
import About from '../pages/About'
import News from '../pages/News'
import Message from '../pages/Message'

export default new vueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      children: [
        {
          path: 'news',
          component:News
        },
        {
          path: 'message',
          component: Message
        }
      ]
    },
    {
      path: '/about',
      component: About
    }
  ]
})

路由为了实现SPA应用：single page web application，整个应用只有一个完整的页面，点击页面中的导航链接不会刷新，只会进行局部刷新更新；数据需要通过AJAX请求获取；
路由：是一组映射关系：（key–value）key是路径，value可能是function或者component；
使用：1.npm安装；2.import导入；3.Vue.use()使用；4.创建router文件夹，在index.js中配置 new vueRuoter({})对象，并暴露出这个对象；标签中使用的时候就需要使用router-link标签，属性使用to=“path”；active-cass属性，判断是否激活；
router-link标签最终也是编程a标签；router-view标签，告诉vue将要在哪个位置展示组件呈现位置；
注意点：1.路由组件放在pages文件夹，一般组件放在components；2.切换后，路由组件时被频繁销毁和挂载；3.路由组件的vc上面会多 $r o u t e （每一个路由组件上的是不同的）和$ router（整个应用的路由器，每个路由组件上的是一样的）;
嵌套（多级）路由：在一级路由的里面配置children:[]来配置二级路由，里面的path不用加/。属性to中写路径的时候要连着父级的路由一起写了，写完整；