zoukankan      html  css  js  c++  java

  • Vue-Router笔记

    一.安装路由

    npm install vue-router --save

    二.配置路由

    • 在src下面创建一个router目录

    • 在router目录下面创建一个index.js

    • 在index.js文件中添加如下结构的内容

      import VueRouter from 'vue-router'
import Vue from 'vue'

//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 组件与路由之间的映射关系
const routes = [];
// 2.创建路由对象
const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes
})
// 3. 将router对象传入到vue实例
export default router

    • 在main.js文件中将创建的路由实例挂载到Vue实例上.

      import router from "./router";
new Vue({
    render: h => h(App),
    // 4. vue实例上面挂载路由对象.
    router,
}).$mount('#app')

    三.配置路由与组件的映射关系

    • 创建组件,我这儿创建两个组件,Home.Vue 和 About.Vue

      <template>
    <div>
        <h2>我是主页</h2>
    </div>
</template>

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

<style scoped>

</style>

      <template>
    <div>
       <h2> 我是About</h2>
    </div>
</template>

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

<style scoped>

</style>

    • 在router/index.js中配置路由与组件的映射关系

      import Home from '../components/Home'
import About from "../components/About";

const routes = [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
];

    • 在App.Vue中使用路由,这儿需要用到两个标签. router-link 和 router-view

      <template>
    <div id="app">
        <router-link to="/home">首页</router-link>
        <router-link to="/about">关于</router-link>
        <router-view></router-view>
    </div>
</template>

      router-link : 路由对象. 实质就是一个a标签, to属性指向组件的路径

      router-view: 路由组件在App.Vue中的显示位置. 占位.

    四. 细节配置

    • 默认路径重定向

      const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
];

      以上示例,假如浏览器请求 http://127.0.0.1:8080 就会重定向到 http://127.0.0.1:8080/home

    • History模式

      html5默认是hash模式: http://127.0.0.1:8080/#/home, 其中有个#太难看,推荐使用history模式.

      const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode:'history'
})

      使用history模式之后,URL显示就是这样: http://127.0.0.1:8080/home

    • router-link

      • to : 路由组件映射的路径

      • tag: router-link渲染成什么样的组件. 比如: tag = 'button', 那么渲染之后就是一个按钮; tag='li', router-link渲染之后就是一个li标签. 默认是a标签.

      • replace : router-link默认是putState模式,使用replace之后,就改成了replace模式.

        <router-link to="/home" replace>首页</router-link>

      • active-class: 选中的router-link默认就会有一个router-link-active的class样式. 可以使用active-class对router-link-active进行重命名.

        <router-link to="/about" active-class="active">关于</router-link>

        还可以在router/index.js文件中进行统一配置

        const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode:'history',
    linkActiveClass:'active'
})

    • $router

      如果想使用代码的方式进行路由跳转.可以使用vue-router提供的$router对象来实现.

              methods:{
            homeClick() {
                // 触发homeClick方法,跳转到/home
                this.$router.push('/home')
            },
            aboutClick() {
                // 触发aboutClick方法,跳转到/about
                this.$router.push('/about')
            }
        }

      除了使用push方法之外,还可以使用replace方法. 使用replace方法之后路由不能前进后退. replace方法与router-link标签中的replace属性作用一样.

    五.动态路由

    • 在router/index.js配置动态路由

          {
        // username是动态改变的
        path: '/user/:username',
        component: User
    }

    • router-link 标签运态属性绑定

      <router-link :to="'/user/'+username">用户</router-link>

    • 从$route对象中获取动态路由参数

         <h2>我是用户....{{$route.params.username}}</h2>

      或者通过计算属性

      computed:{
            getUserName() {
                return this.$route.params.username
            }
        }

        <h2>我是用户....{{getUserName}}</h2>

    六.路由的懒加载

    • 路由懒加载即是路由到那个模块,就加载那个模块组件的代码.
    import VueRouter from 'vue-router'
import Vue from 'vue'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'

//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建路由对象
const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
    ,
    {
        // username是动态改变的
        path: '/user/:username',
        component: User
    }
];
const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode: 'history',
    linkActiveClass: 'active'
})
// 3. 将router对象传入到vue实例
export default router

    以上代码的路由配置不是懒加载模式.所有的js代码会打包成一个js文件. 浏览器请求时,会一次性的将打包js文件从请服务器请求到浏览器端.

    • 懒加载配置
    import VueRouter from 'vue-router'
import Vue from 'vue'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'

//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建路由对象
const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: () => import('../components/Home')
    },
    {
        path: '/about',
        component: ()=> import('../components/About')
    }
    ,
    {
        // username是动态改变的
        path: '/user/:username',
        component: ()=> import('../components/User')
    }
];
const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode: 'history',
    linkActiveClass: 'active'
})
// 3. 将router对象传入到vue实例
export default router

    七.路由嵌套

    • 实现步骤

      • 创建对应的子组件, 并且在路由映射中配置对应的子路由
      • 在组件内部使用router-view标签 .

    • 代码实现

      • HomeMessage.Vue组件

        <template>
    <div>
        <ul>
            <li>消息1</li>
            <li>消息2</li>
            <li>消息3</li>
            <li>消息4</li>
        </ul>
    </div>
</template>

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

<style scoped>

</style>

      • HomeNews.Vue组件

        <template>
    <div>
        <ul>
            <li>新闻1</li>
            <li>新闻2</li>
            <li>新闻3</li>
            <li>新闻4</li>
        </ul>
    </div>
</template>

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

<style scoped>

</style>

      • router/index.js文件中配置子路由

        import VueRouter from 'vue-router'
import Vue from 'vue'
//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建路由对象
const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: () => import('../components/Home'),
        children: [
            {
                path: '/home/news',
                component: () => import('../components/HomeNews')
            },
            {
                // path: '/home/message',  // 可以这样,绝对路径
                path: 'message',  // 可以这样,相对路径
                component: () => import('../components/HomeMessage')
            }
        ]
    },
    {
        path: '/about',
        component: () => import('../components/About')
    }
    ,
    {
        // username是动态改变的
        path: '/user/:username',
        component: () => import('../components/User')
    }
];
const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode: 'history',
    linkActiveClass: 'active'
})
// 3. 将router对象传入到vue实例
export default router

        或者

        import VueRouter from 'vue-router'
import Vue from 'vue'

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
//1. 通过Vue.use(插件),安装插件
Vue.use(VueRouter)
// 2.创建路由对象
const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,
        children: [
            {
                path: '/home/news',
                component: HomeNews
            },
            {
                // path: '/home/message',  // 可以这样,绝对路径
                path: 'message',  // 可以这样,相对路径
                component: HomeMessage
            }
        ]
    },
    {
        path: '/about',
        component: () => import('../components/About')
    }
    ,
    {
        // username是动态改变的
        path: '/user/:username',
        component: () => import('../components/User')
    }
];
const router = new VueRouter({
    // 配置路由与组件之间的映射关系.
    routes,
    mode: 'history',
    linkActiveClass: 'active'
})
// 3. 将router对象传入到vue实例
export default router

        使用上面这种方式配置路由映射关系进,router-link标签的to属性不能使用相对路径

        <router-link to="news" >新闻</router-link>   <--路由失败-->
<router-link to="/home/news" >新闻</router-link>  <--路由成功-->

      • 在Home.Vue组件中配置两个子路由

        <template>
    <div>
        <h2>我是主页</h2>
        <router-link to="/home/news" >新闻</router-link>
        <router-link to="/home/message">消息</router-link>
        <router-view></router-view>
    </div>
</template>

    八.参数传递

    • 路由动态传参的两种类型, params类型与query类型.

    8.1 params类型

    • 配置路由格式: /router/:id

          {
        // username是动态改变的
        path: '/user/:username',
        component: () => import('../components/User')
    }

    • 传递的方式: 在path后面跟上对应的值

           <router-link :to="'/user/'+username">用户</router-link>

    • 传递后形成的路径: router/123, router/admin等

      http://localhost:8080/user/admin

    • 取值方式

      $route.params.username

    8.2 query类型

    • 配置路由格式: /router . 普通配置

    • 传递的方式: query对象传参

    • 传递的形成的路径 : /router?id=123, 或者/router?name=admin.

    • 取值

      <h2>{{$route.query}}</h2>

    • 示例代码

      • 路由映射

           {
        path: '/profile',
        component: Profile
    }

      • router-link标签使用

                <router-link :to="{
            path:'/profile',
            query:{
                name: 'admin',
                age: 18,
                gender: 'female'
            }
        }">档案
        </router-link>

      • 浏览器显示

        http://localhost:8080/profile?name=admin&age=18&gender=female

      • 取值

        <h2>{{$route.query.name}}</h2>
<h2>{{$route.query.age}}</h2>
<h2>{{$route.query.gender}}</h2>

    • 示例代码2

    • 通过按钮点击跳转路由

        <button @click="profileClick">档案1</button>

        methods: {
            profileClick() {
                this.$router.push({
                    path:'/profile',
                    query:{
                        name:'bide',
                        age:1212,
                        gender:'male'
                    }
                })
            }
        }

    8.3 总结

    • 如果传参较多,建议使用query传参.

    九.全局导航守卫

    ​ 在路由发生改变时进行监控(做一些事.)

    • 在router/index.js添加以下配置

      // 路由全局导航穿守卫, 前置钩子. 在路由跳转之前执行.
router.beforeEach((to,from,next)=>{
    // 从from 跳转到to
    // todo 改tab的title
    document.title = to.matched[0].meta.title
    console.log(to)
    next();
})

    • 在组件路由映射关系中添加meta配置

      const routes = [
    {
        path: '',
        // 重定向.
        redirect: '/home'
    },
    {
        path: '/home',
        component: Home,

        children: [
            {
                path: '/home/news',
                component: HomeNews
            },
            {
                // path: '/home/message',  // 可以这样,绝对路径
                path: 'message',  // 可以这样,相对路径
                component: HomeMessage
            }
        ],
        meta:{
            title:'首页'
        }
    },
    {
        path: '/about',
        component: () => import('../components/About'),
        meta: {
            title: '关于'
        }

    },
    {
        // username是动态改变的
        path: '/user/:username',
        component: () => import('../components/User'),
        meta: {
            title: '用户'
        }
    },
    {
        path: '/profile',
        component: Profile,
        meta: {
            title: '档案'
        }
    }
];

    十. 路由独享守卫

    十一.keep-alive

    • 使用keep-alive之后,组件不会每次都是创建 , 可以通过组件的created函数进行验证.

      <keep-alive>
	<router-view></router-view>
</keep-alive>

    • 两个属性

      • include : 指定那些组件会被缓存,正则表达式或字符串,多个组件用逗号进行分隔

      • exclude : 指定那些组件不会被缓存. 正则表达式或字符串,多个组件用逗号进行分隔
  • 相关阅读:
    python简介
    计算机基础
    C# 验证数字
    在字符串指定的索引下添加字符，输出换行
    js中实现子页面向父页面中赋值
    js搜索相同类型的控件全选、取值（Checkbox）
    Nhibernate中多Or条件的查询，很多Or的查询
    js遍历checkbox获取数据
    Jquery获取web窗体关闭事件，排除刷新页面
    两年多的工作感悟
  • 原文地址：https://www.cnblogs.com/z-qinfeng/p/13055042.html
Copyright © 2011-2022 走看看