s

Vue路由1

Hash路由：移步https://www.cnblogs.com/joyho/articles/4430148.html

路由使用例子【笔记有些许凌乱】：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <script src="../../js/vue.js"></script>
 8     <script src="../../js/vue-router.js"></script>
 9 </head>
10 <style>
11    .myactive{
12        color:red;
13        font-size:24px;
14    }
15 </style>
16 <body>
17     <div id="app">
18       <!-- <a href="#/login">登录</a> -->
19       <!-- 使用hash路由 来实现页面不刷新而页面元素改变，【也就是单页面网页差用方式-hash【#号】】 -->
20       <!-- <a href="#/register">注册</a>  【使用a超链接实现hash路由也是一种方式，但是不推荐，因为vue-router 提供了一个 router-link这样一个标签，去实现hash路由】 -->
21       <router-link to='/login?id=10&name=zs'>登录</router-link>
22       <!-- to 就表示路由路径，不需要带上#号 route-link 默认会被渲染为超链接 可以使用 tag='span/label'改变渲染方式，但是点击事件一定会有，同样可以hash路由 -->
23       <router-link to='/register/621'>注册</router-link>
24       <router-view></router-view>
25        
26 
27       <!-- 【既然是路由，当然可以进行参数传递 to='/login?id=10&name=zs'
28         组件和vue实例一样都有自己的声明周期钩子函数，也可以进行值引用{{ val }}
29         】 -->
30      
31 
32     </div>
33     <!-- 注意，组件也可以被$refs引用 -->
34 
35 </body>
36 <script>
37      Vue.config.devtools = true;
38     //vue-rourer.js 被引入后，window全局就会多了一个VueRouter这样一个构造函数，可以new 一个路由配置实例
39     let comobj1 = {
40         template:'<h1>登录组件---{{ $route.query.id }} ---{{ $route.query.name}}  </h1>',
41         created(){ //传参方式一！！！
42             console.log(this.$route.query)//vue-router 提供的用于访问url参数
43         }
44     }
45     let comobj2 = {
46         template:'<h1>注册组件 使用params接收占位符方式提供的参数---传入id为:{{$route.params.id }}</h1>',
47         created() {
48             console.log(this.$route)
49         }
50     }
51     let routerobj = new VueRouter({
52         routes:[ //注意此处为 routes  不是 routers
53             {path:'/',redirect:'/login'},//如果请求的是其他路径，比如请求域名+’/‘这样一个路径，比较好的方式就是如果没登录过就跳转【redirect】到登录界面【与nodejs的redirect本质上不同】 
54             {path:'/login',component:comobj1},
55             {path:'/register/:id/:name',component:comobj2},
56 
57             //《路由传参第二种方式，【/register/:id 后面跟上一个占位符 ：id,
58             //表示到时候你需要在url地址对应位置处给一个id值】【而且此处提供了几个占位符，到时候router-link to=“” 就必须提供几个参数，否则无法匹配成功】，然后可以用
59             // this.$route.params 接收并使用 》
60 
61 
62         ] //routers 属性，数组，数组元素为对象，每个对象表示一个路由匹配规则【有两个属性，第一个path:匹配路由【url】，第二个component要展示的组件的【模板对象】】
63           //而且展示组件也需要借助 vue-router提供的 router-view这个标签来展示，要展示的组件内容就被被展示到 <router-view></router-view>位置处
64 
65         //与routes平级的属性： linkActiveClass  默认值: "router-link-active" 全局配置 <router-link> 默认的激活的 class 可以修改为自己的样式
66         ,linkActiveClass:'myactive'
67 
68 
69         //想实现动画效果 吧 <router-view></router-view> 包裹在 transition标签中，并且 加上两组【共四个【v-enter、v-leave-to v-enter-active,v-leave-active】 class 样式】即可
70        
71         //
72     }) 
73     
74     let vm = new Vue({
75         el:'#app',
76         data:{
77            
78         },
79         methods:{
80            
81         },
82         
83         router:routerobj //将路由实例与vue实例关联起来，注册路由实例
84     })
85 </script>
86 </html>
View Code

 

点击超链接实现hash路由跳转：Vue并没有屏蔽原生a超链接的写法，但是Vue中不推荐这种写法，Vue 提供了 <router-link></router-link>去实现路由跳转，Vue系统默认会把这个标签渲染为超链接！

　　用法：

 <router-link to='/login?id=10&name=zs'>登录</router-link>
      <!-- to 就表示路由路径，不需要带上#号 route-link 默认会被渲染为超链接 可以使用 tag='span/label'改变渲染方式，但是点击事件一定会有【如果定义了的话】，同样可以hash路由 -->
　　
<router-link></router-link>,点击这个渲染后的结果，默认时a标签，后vue-router.js,默认会给这个渲染结果加上router-link-active，可以通过复用这两个类实现路由高亮效果。可以修改路由的构造选项来修改
　　ex: linkActiveClass:'myactive' //路由实例中跟routes平级的属性


 

 

 

Vue路由的使用步骤总结：

  1. 引入 包，先vue.js，vue-router.js 必须在vue.js后
  2. 实例化一个vue实例
  3. 创建组件模板
  4. 实例化路由实例
  5. 定义路由规则【匹配到指定hash路由，就展示指定组件，其内部封装有 hashchange事件，hash路由改变就会触发去渲染相应组件】
  6. 将路由实例挂载到vue实例上
  7. 展示hash匹配到的组件--- <router-view></router-view>

 

路由中的参数的两种接收方式：

　　1.例如有url：http://127.0.0.1:5500/lecturedemo/vue/20201229/vue-router.html#/login?id=10&name=zs，点击就会切换到组件a ，？后面参数 默认会放在该a组件模板实例的 $route的query属性中，可以在组件内部使用 this.$route.query 获取到

　　2.url:http://127.0.0.1:5500/lecturedemo/vue/20201229/vue-router.html#/login/10/js, router-link to属性值==url【路由规则有定义{path:'/loginr/:id/:name',component:login},

】， 点击就会切换到login组件 这种方式传递的参数，需要用 this.$route.params获取到！！！

　　上面两种方式传递的参数，接收起来不太方便，vue提供了更简单的传参方式  props:[''],跟父组件向子组件传值不同的是， 出了 props:['params1','params2'],除了在props数组中注册传递的参数，还需要在路由规则中增加 props:true 这一配置，表示开启props传值方式：

　　用法：

1. <router-link to='/login/10/zs'>登录</router-link>,   路由地址能匹配上路由规则



2.let comobj1 = { //注册id和name到props中后，组件都可直接使用变量去访问而不使用this.$route.query/params去取得参数了
        props: ['id', 'name'],
        template: '<h1>登录组件---{{ id }} a---a{{ name}} ---   </h1>',
        created() { 
            console.log(this.$route.query) //vue-router 提供的用于访问url参数
        },

    }

3. { 路由中开始props
           path: '/login/:id/:name',
           component: comobj1,
            props: true,
},

 

posted @ 2021-05-06 14:21  努力不搬砖的iori  阅读(55)  评论(0)  编辑  收藏  举报