vue 之ruoter

 VUE router官方文档

另一种方式  

 

 

 

 

 

 

 

 

JavaScript

在main.js文件中写入这些内容

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)

// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')

// 现在，应用已经启动了！

 

在app.vue中引入这些

在App.vue的template 的div写上这些内容

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

 

<template>
  <div id="app01">
    <!--<img src="./assets/logo.png">-->
    <p :class="msg" >{{msg}}</p>
    <!--3插入子组件-->
    <Vheader :hfavs="favs" @addHandler="add"></Vheader>
    <Vmarked></Vmarked>
    
      <!--然后用for 循环将url 信息写入这个router-link标签中去     这里可以直接在for循环这个标签中写上  :to  因为他是在for 循环后调用的所以可以调用到这属性-->
      <router-link  v-for="(item,index) in urls" :to="item.href" :class="{active:current_index==index}" @click="clickHandler" >{{item.name}}</router-link>

<!--路由出口，所有路由匹配的组件都会被渲染到这里-->
    <router-view></router-view>

  </div>
</template>

<script>
//  <!--1 导入子组件-->
  import Vheader from './Vheader.vue'
  import Vmarked from './Vmarked.vue'
  export default {
    name: 'App3',
    data:function(){
      return{
        msg:'今天学习vue',
        favs:['chi','hehe','haha'],
//        也可以在这里将url数据信息写好，在上边的router-link标签中
// 用for 循环使用使用
        urls:[{href:'/',name:"首页"},
        {href:'/luffy',name:"路飞学费和高"}],
        current_index:0
      }
    },
    methods:{
      add(a){
        this.favs.push(a)
      },
      clickHandler(index){
        this.current_index=index

      }
    },
    computed:{

    },
    components:{
//      2挂载子组件
        Vheader:Vheader,
        Vmarked
      },
}
</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;
}
.active{
  color:yellowgreen;
}

</style>

 这里有一个#号   如何解决

 

 

   详情点我