vue路由 实现步骤 跳转方式 传值方式

路由实现步骤

第一步 在 vue 之后导入 vue-router 路由插件

第二步: 在根组件模板中 添加路由跳转标签

<a href="#/main">主页</a>| <a href="#/login">登录</a>| <a href="#/user">个人</a>

第三步: 在全局作用域 创建一些组件 路由跳转页面对应的组件
组件创建之后的返回值是组件的构造函数

var MainCom = Vue.component("mainCom", { template: "<h2>这是主页</h2>" });
var LoginCom = Vue.component("loginCom", { template: "<h2>这是登录页</h2>" });
var UserCom = Vue.component("userCom", { template: "<h2>这是个人页</h2>" });

第四步 创建路由对象 配置路由信息
在 routes 数组中配置路由信息 一个对象 对应一个路由信息

const router = new VueRouter({
  routes: [
    // path表示路由地址 省略了#  component  表示组件值是组建的构造函数
    { path: "/main", component: MainCom },
    { path: "/login", component: LoginCom },
    { path: "/user", component: UserCom },
  ],
});

第五步: 把路由对象加入 vue 根组件对象中

new Vue({
  el: "#myApp",
  router,
});

第六步: 在根模板合适的位置 添加路由出口:组件渲染的位置

<router-view></router-view>

路由跳转的两种方式

1. 在 vue 中 可以使用 vue 路由提供的 routerLink 用于代替 a 标签
   头属性设置跳转的路径 不需要加# 渲染的时候会自定添加

<router-link to="/main">主页</router-link>

2. 编程式跳转 在 js 中使用 router 调用 push 函数实现路由跳转
   在路由组件内添加 methods 函数

var LoginCom= Vue.component("mainCom",{template:"",
methods:{
    change(){
        router.push("/main)
    }
}
})

vue 路由重定向

默认打开主页 路由默认访问的路径 是/可以给默认的/ 添加配置
redirect 表示路由重定向,当首次打开页面时, 默认 hash 路径是/ 此时路由会重定向会把 hash 路径修改为/main,达到默认访问的目的

const router = new VueRouter({
    {path:"/",redirect:"/main"}
})

vue 路由监听

路由监听要在根组件中监听,不能再子组件(例如登录页等)中监听
路由监听$route字段而不是$router 路由配置对象

new Vue({
  el: "myApp",
  watch: {
    $route(newRoute, oldRoute) {
      console.log("上一页是" + oldRoute.path, "当前页是" + newRoute.path);
    },
  },
});

• router 和$router 是一个对象 我们自己newVueRouter创建的路由配置对象
• $route:自动生成的当前路由信息对象 里面有当前路由的路径

路由 keepAlive 与动画

路由跳转的时候,会销毁重建组件 所以组件状态会重叠,如果不想组件状态重置,可以在路由出口添加 keep-alive
如果在组建切换的时候 还需要添加动画效果 那么再添加一层 transition
然后在css中添加样式

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

vue路由传值1 --url拼接传值

路由传值 --url拼接传值

1. 在路由跳转前的组件内,给路由路径后添加问号?键值对拼接数据传值

<router-link :to="'/main?name='+msg">登录去主页</router-link>

2. 在路由跳转后的组件内使用$route对象调用query字段接收数据

    {{$route.query.name}  this.$route.query.name

var MainCom = Vue.component("mainCom",{
    template:"{{$route.query.name}}",
    // 当组件不在keep-alive 中会执行 created和destroyed  函数
    // 当组件在keep-alive 中会执行activated deactivated
    created(){
        console.log("主页创建",this.$route.query.name)
    },
    activated(){
        console.log("主页创建",this.$route.query.name)
    },
})

路由传值2 --友好url传值

1. 在路由配置对象中添加路由配置

{path:"/main/:name",component:MainCom}

2. 在路由条赚钱的组件内,给路由路径后添加 / 拼接数据传值

<router-link :to="'main/'+msg">登录去主页</router-link>

3. 在路由跳转后的组件内 使用$route对象调用params字段接收数据

  {{$route.params.name}}  this.$route.params.name

路由传值3 --query对象传值

// 使用watch或者computed绑定一个obj属性
computed:{
    obj(){
        return {
            path:"/main",
            query:{name:this.msg}
        }
    }
}

1. 在路由跳转签的组件内 给to属性绑定一个对象, path设置路径 query字段

<router-link :to="obj">登录去主页</router-link>

2. 在路由跳转后的组件内,使用$route对象调用query字段接收数据

  {{$route.query.name}}  this.$route.query,name

vue 路由传值4 --命名路由传值

// 在路由跳转前的组件添加
// 使用watch或者computed绑定一个obj属性
computed:{
    obj(){
        return {
            name:"/zhangsan", // 命名路由可以通过路有名跳转  尽量不要用中文
            query:{name:this.msg}
        }
    }
}

1. 在路由配置对象中添加name字段设置命名路由

{path:"/main",component:MainCom,name:"zhangsan"}

2. 在路由跳转前的组件内,给to属性动态绑定一个对象,name设置路由的名字 params设置字段

<router-link :to="obj">登录去主页<router-link>

3. 在路由跳转后的组件内, 使用$route对象调用params或query字段接收数据

 {{route.params.name}} this.$route.params.name
  {{route.query.name}} this.$route.query.name

vue编程导航跳转与取值

// <!-- 在路由跳转前的组件添加一个函数 -->
methods:{
    goToMain(){
        // 编程式导航跳转页面
        router.push("/main")

        // 跳转并使用url拼接传值  query取值
        router.push("/main?name="+this.msg)

        // 跳转并使用友好url传值 需要拼接变量params
        router.push("/main/"+this.msg)

        // 跳转并使用query对象传值   query
        router.push({
            path:"/main",
            query:{name:this.msg}
        })

        // 使用命名路由跳转值  设置name
        router.push({
            name:"luyou",
            params:{name:this.msg}
        })

        router.back() //返回上一个路由
        router.go(1) // 去上一个路由
    }
}

vue路由传值总结

1. url拼接 友好url query对象 传值方式都会把数据拼接到url路径上,刷新页面不会丢失,但是由于url长度有限制,数量不能太大
2. 命名路由传值 传值方式不会把数据拼接到url路径上,刷新页面数据会丢失,但是传递的数据量大小无限制
3. 其中url传值 query对象传值是用query取值, 友好url是用params取值
4. 命名路由取值使用query 或 params