Vue路由

https://router.vuejs.org/

vue路由配置：

1.安装

npm install vue-router --save / cnpm install vue-router --save

2、引入并 Vue.use(VueRouter) (main.js)

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、配置路由

1.创建组件 引入组件

2.定义路由 （建议复制）

const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
{ path: '*', redirect: '/home' } /*默认跳转路由*/
]

 

3.实例化VueRouter

const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

4.挂载

new Vue({
el: '#app',
router，
render: h => h(App)
})

5.根组件的模板里面放上这句话 <router-view></router-view> 

6.路由跳转

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>

 

将router配置提取到src\router\index.js中

index.js：

import Vue from 'vue'
import Router from 'vue-router'
import Home1 from "@/components/Home1";
import New1 from "@/components/New1";

Vue.use(Router)

export default new Router({
  routes: [
    {path:'/home', name: 'Home',component: Home1},
    {path:'/new',component: New1},
    {path:'/',redirect:'/home'}
  ]
})

 

main.js:

import Vue from 'vue'
import router from './router'
import MyApp2 from './MyApp2'

new Vue({
  el: '#app',
  router,
  render: h => h(MyApp2)
})

 动态路由：

export default new Router({
  routes: [
    {path:'/home', name: 'Home',component: Home2},
    {path:'/new',component: New2},
    {path:'/content/:id',component: Content},//动态路径参数 以冒号开头
    {path:'/pcontent',component: Pcontent},
    {path:'/',redirect:'/home'}
  ]
})

获取路径：

<template>
    <div>
      New组件
      <ul>
        <li v-for="i in 5">
          <router-link to="/content/123">News</router-link>
        </li>
        <hr>
        <li v-for="i in 5">
          <router-link :to="'/content/'+i">News {{i}}</router-link>
        </li>
      </ul>

    </div>
</template>

this.$route.params

 mounted() {
            console.log(this.$route.params)//{id: "5"}
        }

获取get传值：

<template>
    <div>
      Home2组件
      <ul>
        <li v-for="i in 5">
          <router-link :to="'/pcontent?pid='+i">列表{{i}}</router-link>
        </li>
      </ul>
    </div>
</template>

this.$route.query

mounted() {
            // 获取get传值
            console.log(this.$route.query)//{pid: "1"}
        }

编程式的导航

  routes: [
    {path:'/home', name: 'Home',component: Home2},
    {path:'/new',component: New3,name:'New'},
    {path:'/content/:id',component: Content,name:'Content'},//动态路径参数 以冒号开头
    {path:'/pcontent',component: Pcontent,name:'Pcontent'},
    {path:'/',redirect:'/home'}
  ]

methods:{
            toNew1(){
                this.$router.push({path:'pcontent'})
            },
            toNew11(){
                this.$router.push({name:'Pcontent'})
            },
            toNew2(){
                this.$router.push({path:'/content/495'})
            },
            toNew22(){
                this.$router.push({name:'Content',params:{id:495}})
            },
        }

路由的嵌套

1.配置路由

    {
      path:'/user',
      component:User,
      children:[
        {path:'userAdd',component: UserAdd},
        {path:'userList',component: UserList},
      ]
    }

2.父路由里面配置子路由显示的地方 <router-view></router-view>

<router-link to="/user/userAdd">User</router-link>

<template>
  <div id="user">
    <div class="user">
      <div class="left">
        <ul>
          <li>
            <router-link to="/user/userAdd"> 增加用户</router-link>
          </li>
          <li>
            <router-link to="/user/userList"> 用户列表</router-link>
          </li>
        </ul>
      </div>
      <div class="right">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

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


<style lang="scss" scoped>
  .user{
    display:flex;
    .left{
      width:200px;
      min-height:400px;
      border-right:1px solid #eee;
      li{
        line-height:2;
      }
    }
    .right{
      flex:1;
    }
  }
</style>