前端Vue学习之路(二)-Vue-router路由

Vue-router（基础版）

• 当前项目版本
• vue(2.6.14)
• vue-router(3.5.2)

–

一.增加静态路由

项目创建好之后再src文件夹下的views文件夹下创建one.vue

<template>
  <div>
      <h3>第一个页面</h3>
  </div>
</template>

<script>
export default {

}
</script>
<style>
</style>

2.配置路由
在src目录下的router文件下的index.js

import one from '../views/one.vue'
const routes = [
  {
    path:'/one',
    component:one
  }
]

3.在App.vue中

<router-link to="/one">one</router-link>

二.动态路由+路由嵌套+404页面

1.在view文件下新建一个User文件夹(这里方便后期查看,不新建文件夹也行但是层级看着就很乱。)
建完之后层级是这样的

• src/views/User/UserHome.vue
• src/views/User/UserPosts.vue
• src/views/User/UserProfile.vue
• src/views/User.vue

在User下新建UserHome.vue

<template>
  <div>
      Home
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

再创建一个UserPosts.vue

<template>
  <div>
      Posts
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

最后创建UserProfile.vue

<template>
  <div>
      Profile
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.在views目录下创建User.vue

<template>
  <div>
      <h2>User {{ $route.params.id }}</h2>
      <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

3.route目录下的index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import User from '../views/User.vue'
import UserHome from '../views/User/UserHome.vue'
import UserProfile from '../views/User/UserProfile.vue'
import UserPosts from '../views/User/UserPosts.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:"/user/:id",
    component:User,
    children:[
      {
        path:'',
        component:UserHome
      },
      {
        path:'profile',
        component:UserProfile
      },
      {
        path:'posts',
        component:UserPosts
      }
    ]
  } 
]

const router = new VueRouter({
  mode:'history',
  routes
})

export default router

4.在App.vue修改为以下内容

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/user/eduardo">/user/eduardo</router-link>
      <br/>
      <router-link to="/user/eduardo/profile">/user/eduardo/profile</router-link>
      <br/>
      <router-link to="/user/eduardo/posts">/user/eduardo/posts</router-link>
      <br/>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

• 增加404页面
  先在views目录下创建404.vue页面
  再按下面配置
  这是第一种方法

 import notFound from '../views/404.vue'
 {
    path: "/404",
    name: "notFound",
    component: notFound
  }, 
  {
    path: "*", // 此处需特别注意置于最底部
    redirect: "/404"
  }

第二种方法

{
   path: "*",
   name: "notFound",
   component: () => import(/* webpackChunkName: "about" */ '../views/404.vue')
 }

三. 编程式导航

声明式	编程式
<router-link :to="…">	router.push(…)

1.在views下新增two.vue

<template>
  <div>
      <h3>第二个页面</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

2.然后在route下的index.js新增代码块

const routes = [
  {
    path:'/two',
    component:two
  }
 ]

3.修改one.vue的内容

<template>
 <div>
     <h3>第一个页面</h3>
     <button @click="toNextPage">跳转到第二个页面</button>
 </div>
</template>

<script>
export default {
   //methods方法
   methods:{
       toNextPage(){
           this.$router.push("two");
       }
   }
}
</script>

<style>

</style>

四.命名路由

通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候
1.先在views文件夹下创建Form.vue

<template>
  <div>
      form组件
  </div>
</template>

2.然后再创建一个Index.vue

<template>
  <div>
    <router-link :to="{ name: 'form123'}">User</router-link>
  </div>
</template>

3.修改src/router/index.js

const router = [
  routes: [
    {
      path: '/form',
      name: 'form123',
      component:()=> import('../views/Form.vue')
    }
  ]
]

五.命名视图

1.修改App.vue,修改内容如下

<template>
      <div>
	      <router-view class="view one"></router-view>
	      <router-view class="view two" name="a"></router-view>
	      <router-view class="view three" name="b"></router-view>
      </div>
</template>

2.修改router文件夹下index.js

import Foo from '../views/Foo.vue'
import Bar from '../views/Bar.vue'
import Baz from '../views/Baz.vue'

const router = new VueRouter({
  routes: [
    {
      path: '/',
      //这里是加s的
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

如果把 <router-view class="view three" name="b"></router-view>的name属性去掉就会显示默认组件

六.重定向和起别名

1.重定向

const routes = [
  {
    path:'/',
    redirect:'/one'
  },
  {
    path:'/one',
    component:one
  }
]

2.起别名

const routes = [
  {
    path:'/',
    redirect:'/one',
    
  },
  {
    path:'/one',
    component:one,
    alias:'/aaa'
  }
]

七.路由组件传参

旧方案，高耦合低内聚

• 使用$route.params.id

新方案,高内聚低耦合

1.先在src文件夹下的views文件夹下创建newUser.vue

src\views\newUser.vue
增加以下内容

<template>
  <div>
    newUser{{id}}
  </div>
</template>

<script>
export default {
    props:['id'],
    data(){
        return {
        }
    }
}
</script>

2.修改route文件夹下的index.js

修改这一块区域

const routes = [
	 {
	    path:"/newuser/:id",
	    component:() => import('../views/newUser.vue'),
	    props:true
 	}
 ]

在浏览器地址栏里输入....../newuser/.....即可查看

八.H5 History 模式(去掉#号)

-	hash	history
url显示	有#显示	无#
回车刷新	可以加载到hash对应页面	404
支持版本	支持低版本浏览器和IE浏览器	H5推出的API

在route文件下的index.js找到以下代码块,修改如下内容

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

vue默认hash模式，想要没有#，可以使用history模式