zoukankan      html  css  js  c++  java
  • vue路由详解

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤。

    安装

    直接下载/CDN

    https://unpkg.com/vue-router/dist/vue-router.js

    Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

    在 Vue 后面加载 vue-router,它会自动安装的:

    <script src="/path/to/vue.js"></script>
    <script src="/path/to/vue-router.js"></script>

    NPM

    npm install vue-router

    如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)

    如果使用全局的 script 标签,则无须如此(手动安装)。

    #基础

    开始

    HTML:

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    
    <div id="app">
      <h1>Hello App!</h1>
      <p>
        <!-- 使用 router-link 组件来导航. -->
        <!-- 通过传入 `to` 属性指定链接. -->
        <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
    </div>

    <router-view>显示的当前路由的内容

    <router-link to="/foo">实现路由的跳转

    JavaScript:

    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)
    
    // 1. 定义(路由)组件。
    // 可以从其他文件 import 进来
    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
    // 2. 定义路由
    // 每个路由应该映射一个组件。 其中"component" 可以是
    // 通过 Vue.extend() 创建的组件构造器,
    // 或者,只是一个组件配置对象。
    // 我们晚点再讨论嵌套路由。
    const routes = [
      { path: '/foo', component: Foo },
      { path: '/bar', component: Bar }
    ]
    
    // 3. 创建 router 实例,然后传 `routes` 配置
    // 你还可以传别的配置参数, 不过先这么简单着吧。
    const router = new VueRouter({
      routes // (缩写)相当于 routes: routes
    })
    
    // 4. 创建和挂载根实例。
    // 记得要通过 router 配置参数注入路由,
    // 从而让整个应用都有路由功能
    const app = new Vue({
      router
    }).$mount('#app')
    
    // 现在,应用已经启动了!

    当 <router-link> 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active

    步骤:

    1.在main.js中引入vue-router

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

    2.在main.js中使用这个router插件

    Vue.use(VueRouter)

    3.生成这个router实例

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

    4.在index.js中把路由实例传递给Vue根组件

    import router from './router'
    
    new Vue({
        el:'#app',
        router,
        template:'<APP/>',
        components:{ APP }
    })

    静态路由

    静态配置的 ---> import ....

    固定路径路由的配置

    {
        path:'/',
        name:'home',
        component:Home
    },{
        path:'/list',
        name:'list',
        component:List
    }

    动态路由匹配

    只有动态路由可以做到分页的效果

    //localhost:8080/#/list/2 index,js

    {
        path:'/list/:id',
        name:'list',
        component:List
    }

    list.vue

    <template>
        <div>{{title}}</div>
    </template>
    
    <script>
    
        data(){
            return {
                title:""
            }
        }
    
        export default{
            mounted(){
                if(this.$route.params.id == 1){
                    //请求第一页数据
                    this.title="第一页"
                }
                if(this.$route.params.id == 2){
                    //请求第二页数据
                    this.title="第二页"
                }
            }
        }
    </script>

    接收多个个参数

    index.js

    {
            path:'/list/:id/name/:name',
            name:'list',
            component:List
        }

    list.vue

    <template>
        <div>{{title}}{{name}}</div>
    </template>
    
    <script>
    
        data(){
            return {
                title:"",
                name:""
            }
        }
    
        export default{
            mounted(){
                //结构赋值写法
                const {name,id} = this.$route.params;
                this.name = name;
                
                //this.name = this.$route.params.name;
                if(this.$route.params.id == 1){
                    //请求第一页数据
                    this.title="第一页"
                }
                if(this.$route.params.id == 2){
                    //请求第二页数据
                    this.title="第二页"
                }
            }
        }
    </script>

    传递不同参数 显示不同数据

    项目应用:详情页

    watch 响应路由参数的变化

    监听路由的变化

    watch:{
        '$route'(to,from){
            this.name = to.params.name;
        }
    }

    在2.2中引入守卫( beforeRouteUpdate)

    守卫 --> 钩子函数

    beforeRouteUpdate (to, from, next) {
        this.name = to.params.name;
        next();//走到下一个钩子
    }

    嵌套路由

    头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做

    {
            path:'/list',
            name:'list',
            component:List,
            childeren:[{
                path:'a',
                component:A
            }]
        }

    再引入一个A组件 A.vue

    在list.vue组件中通过,<router-view>显示A组件的内容

    在一个非app组件里面写<router-view>显示的是当前路由下子组件的内容

    编程式的导航

    除了<router-link>来创建a标签来定义导航链接,还可以借助router的实例方法

    router.push(location,onCompelte?,onAbort?)

    在Vue实例内部,可以通过$route访问路由实例,因此你可以调用this.$route.push

    想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。

    当你点击<route-link>时,这个方法会在内部调用,所以说,

    点击<route-link:to="..."> ---> 声明式

    等同于

    调用router.push(...) ---> 编程式

    可以在Header组件中跳转到list中

    export defalut{
        methods:{
            handleClick(){
                this.$router.push({
                    name:'list'
                    
                })
            }
        }
    }

    可以在Header组件中跳转到list/123中

    export defalut{
        methods:{
            handleClick(){
                this.$router.push({
                    //一种方式
                    //path:'/list/123',
                    
                    
                    //2种方式
                    name:'list'
                    params:{
                        id:123
                    }
                })
            }
        }
    }

    使用router.push 或者 router.replace 里面都不能让path和params同时存在

    //字符串
    
    router.push('home');
    
    //对象
    
    router.push({path:'home'})
    
    //命名的路由
    
    router.push({name:'user',params:{userId:123}})
    
    //带查询参数,变成/register?plan=private
    router.push({path:'register',query:{plan:'private'}})

    router.replace

    和router.push唯一的不同就是,不会向history添加新纪录,而是替换掉当前的history记录 不能返回

    router.go

    命名路由

    定义名字跳转

    命名视图

    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
    
    
    var app = new VueRouter({
        routers:[{
            path:'/',
            componens:{
                defaults:Foo,
                a:Bar,
                b:Baz
            }
        }]
        
    })

    重定向和别名

    访问/abc 重定向到/根路径

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

    访问/bieming 实际上还是访问的根路径

    {
        path:'/',
        name:'home',
        component:Home,
        alias:'/bieming'
    }

    路由组件传参

    解耦

    动态路由传id

    {
            path:'/list/:id',
            name:'list',
            component:List,
            props:true
        }

    在list.vue中

    可以直接通过props['id']获取数据

    <template>
        <div>{{id}}</div>
    </template>
    
    <script>
    
        export default{
           props['id']
        }
    </script>

    对象模式

    props:{name:"dell"}

    一般是写死的字符串静态数据

    函数模式

    index.js

    {
            path:'/list/:id',
            name:'list',
            component:List,
            props : (route)=>({
                query:route.query.q
                id:route.params.id
            })
        }

    list.vue

    <template>
        <div>{{query}}</div>
        <div>{{id}}</div>
    </template>
    
    <script>
    
        export default{
           props['query','id']
        }
    </script>

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj
  • 相关阅读:
    android 75 新闻列表页面
    android 74 下载文本
    android 73 下载图片
    android 72 确定取消对话框,单选对话框,多选对话框
    android 71 ArrayAdapter和SimpleAdapter
    android 70 使用ListView把数据显示至屏幕
    maven如何将本地jar安装到本地仓库
    Centos6.7搭建ISCSI存储服务器
    解决maven打包编译出现File encoding has not been set问题
    MySQL 解决 emoji表情 的方法,使用utf8mb4 字符集(4字节 UTF-8 Unicode 编码)
  • 原文地址:https://www.cnblogs.com/guangixn/p/7895809.html
Copyright © 2011-2022 走看看