vue路由基础总结

1.创建项目

为了练习路由 这里没有选择路由 就选了Bable 自己一步一步的配置 加深印象。

然后下载路由 npm install vue-router --save

2.基础配置

src文件下新建一个router.js  管理所有的路由

// 1.引入vue
import Vue from 'vue'
//引入路由
import Router from 'vue-router'
// 使用路由
Vue.use(Router);
// 创建一个实例输出它
export default new Router({
    routes:[]   //注意这里是routes 不是router 
})

然后在main.js里面运用并挂载他，这样就可以在全局使用了.

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

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

3.页面跳转和跟路由配置

1.新建view文件夹 里面新建Home.vue和About.vue两个文件夹

2.router.js里面引入Home和About两个组件，并配置跟路由重定向和路由路径

路由重定向一共有三种方式 下面演示只用第一种

{path:'/', redirect: '/home'},

{path:'/',redirect:{name:'home'}},

{path:'/',redirect:to=>{return '/home'}},

注意组件的大小写一定要一样 不然会报错

3.在App.vue要写路由出口和配置一下路由导航 路由出口一定要写 不然没效果

a.router-link-exact-active 是设置路由选中是的样式 可以设置颜色等

 3.路由的histoy模式

直接在前面加一个 mode:'history',就可以了  下图是他们的区别 history模式为了防止刷新404 需要后台人员配置一下

4.动态路由设置

3种方式

第一种
{path:'/mine/:name/:age',name:'mine',component:Mine}  //常规方式
第二种
{path: '/mine', name: 'mine', component: Mine, props: {name: '小撩'，sex='nan'}} //props方式 

     在组件里要接收才可以

第三种

{path: '/mine/:name/:sex', name: 'mine', component: Mine, props: true}

props:true  这样后面也可以加红色的参数了 第二种是全部写到对象里 不加上面红色的部分了 都可以通过props方法来拿 但是？sex=nan&height=111 这种方式就拿不到 就可以把true改成一个函数

{path: '/mine/:name/:sex', name: 'mine', component: Mine, props: func} 在上面加一个函数就可以拿到？sex=nan&height=111了

let func = (route)=>{
    return {
        name: route.params.name,
        sex: route.params.sex,
        height: route.query.height,
        dog: route.query.dog,
    }
};

router.js里面

不能这样写 下面红色部分是错的

{path:'/mine/:name/:age？sex=男&height=111',name:'mine',component:Mine} 
注意 localhost:8080/#/mine/clj/22?sex=nan&height=180  红色部分是直接传进来的 在路由path中 不用：sex ：height 获取使用this.$route.query  
路由path加了 :name :sex 访问的时候也必须嫁两个参数才可以 比如localhost:8080/#/mine/clj/22 不然访问不了 用this.$route.params获取数据

路由传过来的参数如下

 组件里面获取路由的参数

 5.嵌套路由

很简单，是那个的子路由 就在那个的下面加上children 然后配置路由和配一级路由一样的  记得加路由出口就可以了 不管多少级都是一样的.