vue路由

下载路由模块

cnpm install vue-router -S VUE路由模块

router文件夹

src/router/index.js

//载入路由
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//配置路由规则
import Home from '../views/home'
import About from '../views/about';
import Product from '../views/product';
import Contact from '../views/contact';

//创建路由实例
// const router
export default new VueRouter({
    routes:[

        {path:'',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/product',component:Product},
        {path:'/contact',component: Contact},
         
      ]
})

在main.js写入

src/main.js
//router文件存放index.js  默认

//导入路由
import router from './router'


new Vue({
  render: h => h(App),
  //路由
  router
  
}).$mount('#app')

编程式与声名式

src/app.vue
     <template>
       <div id="app">
       
        <!-- 编程式声名 -->
       <button @click="$router.push('/contact')"> 联系页面 </button>
       
        <!-- 编程式声名 -->
       <button @click="goto">关于我们</button>
       
         <!--声名式声名 -->
       <router-link to="/product">产品中心</router-link>
       
       <router-view></router-view>
       
      </div>
  </template>    
  

src/app.vue

export default {
  name: 'app',

  data(){
    return {
      navs: [
        {id:1,title:'首页',path:'/home'},
        {id:2,title:'关于我们',path:'/about'},
        {id:3,title:'产品中心',path:'/product'},
        {id:4,title:'联系我们',path:'/contact'}
      ]
    }
  },
  methods:{
   //编程式声名
      goto(){
        if(location.href.indexOf('/about')!=-1) return;    // 页面刷新  可以省略
        this.$router.push('/about')
      }
  }
  
}

动态路由匹配

$route.params 传参

src/app.vue

 <!--声名式声名 -->
  <router-link to="/product/88/ck">产品中心</router-link>
  

src/views/product.vue

 <template>
   <div class="product">
      <h2>产品中心
    {{ $route.params.id }} ---- {{ $route.params.name }}
      </h2>
  </div>
</template>

src/router/index.js

//创建路由实例
export default new VueRouter({
    routes:[

        {path:'',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/product',component:Product},      //以防覆盖
        {path:'/product/:id/:name',component:Product},        //动态路由匹配
        {path:'/contact',component: Contact},
         
      ]
})

$route.query 传参

src/app.vue

 <!--声名式声名 -->
  <router-link to="/product?id=10&name=蔬菜水果">产品中心</router-link>
  

src/views/product.vue

 <template>
   <div class="product">
      <h2>产品中心
    {{ $route.query.id }} ---- {{ $route.query.name }}
      </h2>
  </div>
</template>

src/router/index.js

//创建路由实例
export default new VueRouter({
    routes:[

        {path:'',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/product',component:Product},    //以防覆盖
         //不需要动态路由匹配
        {path:'/contact',component: Contact},
         
      ]
})

$route.params 传参 和 $route.query 传参

src/app.vue

 <!--声名式声名 -->
  <router-link to="/product?id=10&name=蔬菜水果">产品中心</router-link>
  

src/views/product.vue

 <template>
   <div class="product">
      <h2>产品中心
    {{ $route.params.id }} ---- {{ $route.query.name }}
      </h2>
  </div>
</template>

src/router/index.js

//创建路由实例
export default new VueRouter({
    routes:[

        {path:'',redirect:'/home'},
        {path:'/home',component:Home},
        {path:'/about',component:About},
        {path:'/product',component:Product},    //以防覆盖
       {path:'/product/:id',component:Product}, //动态路由匹配
        {path:'/contact',component: Contact},
         
      ]
})

动态路由匹配2

注意：版式一样可以使用

创建page

src/views/page.vue

<template>
  <div class="page">
      <h2>我是--{{ $route.params.name }}</h2>
  </div>
</template>

路由配置缩减

src/router/index.js

//载入路由
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

//配置路由规则
import Page from '../views/page'

//创建路由实例
export default new VueRouter({
    routes:[
        {path:'',redirect:'/page/首页'},
        {path:'/page/:name',component:Page},
      ]
})

头部组件缩减

src/components/the-header.vue

<template>
  <ul class="the-header">
    <li  v-for = "(item,index) in data" :key = "item.id" @click = "toggle(index)" >
    
      <router-link :to="'/page/'+item.title">  {{item.title}}  </router-link>   
      
    </li>
  </ul>
</template>
  

app.vue 缩减

src/app.vue

<template>
  <div id="app">
      <the-header :data="navs" ></the-header>
      
      <router-view></router-view>

  </div>
</template> 

export default {
  name: 'app',

  data(){
    return {
      navs: [
        {id:1,title:'首页'},
        {id:2,title:'关于我们'},
        {id:3,title:'产品中心'},
        {id:4,title:'联系我们'}
      ]
    }
  },
  methods:{
      goto(){
        // 页面刷新  可以省略
        if(location.href.indexOf('/about')!=-1) return;
        this.$router.push('/about')
      }
  }
}

关于vue路由网址导航