欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue的学习(13)路由

程序员文章站 2022-06-03 10:54:20
...

基本路由

感觉就像超链接一样,只不过他不跳转
把对应的组件创建好
Vue的学习(13)路由
配置好路由器

//main
import Vue from 'vue'
import App from './App'

//配置路由器
import router from './router'

new Vue({
  el:'#app',//需要挂载到哪
  components:{App},//将App映射为标签
  template:'<App/>',//模板
  //配置对象的属性名都是一些确定的属性名 不能写router2之类的,
  //注册路由器
  router
})

再配置好路由

//index
/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
Vue.use(VueRouter)//使用插件

export default new VueRouter({
  //配置n个路由
  routes:[
    {
    //path就是路径,路由就是什么样的路径访问什么样的页面,
    //就跟道路上的路牌一样。path 这里表示这个站点什么样的路径到什么样的页面组件。
      path:'/About',
      component:About
    },
    {
      path:'/Home',
      component:Home
    },
    { //自动跳转路由,也就是默认显示
      path:'/',
      redirect:'./About'
    }
  ]
})

//App
<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Router Test</h2></div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!--生成路由链接-->
          <router-link to="/about" class="list-group-item">About</router-link>
          <router-link to="/home" class="list-group-item">Home</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!--显示当前组件-->
              <router-view msg="abc"></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

<style scoped>

</style>

这里为了方便,在根路径下的index中,设置了class样式

 <style>
    .router-link-active {
      color: red !important;
    }
  </style>

router-link-active 表示当前路由被**的时候,添加的属性

总结:我觉得总体思路就是设置path路径名,然后用router-link 去to path的值,然后找到component,去到对应的组件,然后通过router-view显示出来

嵌套路由

再上一个的基础上继续完善

在这里使用了嵌套路由,值得注意的是一定要记得path那里的路径问题,要层层传递下去,表示好当前路径,

//index  
/*
路由器模块
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import About from '../views/About'
import Home from '../views/Home'
import Message from '../views/Message'
import News from '../views/News'
Vue.use(VueRouter)//使用插件

export default new VueRouter({
  //配置n个路由
  routes:[
    {
      path:'/about',
      component:About
    },
    {
      path:'/home',
      component:Home,
      children:[
        {
          // path:'/news',  //path最左侧的永远代表根路由,所以这么写不对
          path: '/home/news',
          component:News
        },
        {
          path:'messages',//简化写法
          component:Message
        },
        {
          path:'',
          redirect:'/home/news'//默认显示news
        }
      ]
    },
    {
      path:'/',
      redirect:'./About'
    }
  ]
})

这里模拟了ajax请求

//Message
<template>
  <div>
    <ul>
      <li v-for="(message, index) in messages" :key="message.id">
        <a href="???">{{message.title}}</a>
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        messages:[]
      }
    },
    mounted() {
      //模拟ajax请求从后台获取数据
      setTimeout(() => {
        const messages = [
          {
            id: 1,
            title: 'message001'
          },
          {
            id: 3,
            title: 'message003'
          },
          {
            id: 5,
            title: 'message005'
          }
        ]
        this.messages = messages
      },1000)
    }
  }
</script>

<style scoped>

</style>

//News
<template>
  <div>
    <ul>
      <li v-for="(news, index) in newsArr" :key="index">{{news}}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        newsArr:['','news001', 'news002', 'news003', 'news004']
      }
    }
  }
</script>

<style scoped>

</style>

//Home
<template>
  <div>
    <h2>Home</h2>
    <div>
      <ul class="'nav nav-tabs">
        <li>
          <router-link to="/home/news">News</router-link>
          <router-link to="/home/messages">Message</router-link>
        </li>
      </ul>
      <div>
        <router-view></router-view>
        <hr>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Home"
  }
</script>

<style scoped>

</style>

Vue的学习(13)路由

这里最后样式应该是有点问题,但是不影响总体思路,问题不大,感觉这里路由刚接触的原因,还是有些不适应,但是总的来说,就是设计好组件,然后注册路由,然后去页面吧它显示出来即可,主要是注册容易出点错,另外,理解router-view,不必太纠结,就像in-for一样,他就是显示当前你点击的那个路由对应的组件,多练多熟悉,但是。。。

要去吃饭了呃~~~~~~~~~~hh

相关标签: Vue vue