vue2路由

我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由。

首先要引入的是vue2与路由文件。

js代码:

<script>
        window.onload=function () {
            var Home={
                template:"<h3>我是首页</h3>"
            };
            var News={
                template:"<h3>我是新闻页面</h3>"
            };
            //配置路由:
            var aaa=[
                {path:"/home",component:Home},
                {path:"/news",component:News},
                {path:"*",redirect:"/home"}
            ];
            //生成路由实例:
            var router=new VueRouter({
                routes:aaa
            });
            //挂载到某个元素上:
            new Vue({
                router,//简写
                el:"#div"
            })
        }
    </script>

 html代码:

<div id="div">
      <div>
          <router-link to="/home">首页</router-link>
          <router-link to="/news">新闻</router-link>
      </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

  看到这里你们会不会感到不管是vue1还是vue2的路由都要比angular复杂一点,但是要比angular路由容易理解。

下面我们来看一下vue2中的二级路由:

js代码:

<script>
        window.onload=function () {
            var Home={
                template:"<h3>我是首页</h3>"
            };
            var News={
                template:`
                <div>
                    <h3>我是用户信息</h3>
                        <ul>
                            <li><router-link to="/user/blue/age/13">blue</router-link></li>
                            <li><router-link to="/user/red/age/14">red</router-link></li>
                            <li><router-link to="/user/green/age/15">green</router-link></li>
                            <li><router-link to="/user/yellow/age/16">yellow</router-link></li>
                        </ul>
                        <div><router-view></router-view></div>
                    </div>
                `
            };
            var UserDefault={
                template:`<h4>{{$route.params}}</h4>`
            };
            //配置路由:
            var aaa=[
                {path:"/home",component:Home},
                {
                    path:"/news",
                    component:News,
                    children:[
                        {path:"/user/:username/age/:age",component:UserDefault}
                    ]
                },
                {path:"*",redirect:"/home"}
            ];
            //生成路由实例:
            var router=new VueRouter({
                routes:aaa
            });
            //挂载到某个元素上:
            new Vue({
                router,//简写
                el:"#div"
            })
        }
    </script>

  html代码:

<div id="div">
      <div>
          <router-link to="/home">首页</router-link>
          <router-link to="/news">用户</router-link>
      </div>
        <div>
            <router-view></router-view>
        </div>
    </div>

  以上就是vue2中的2级路由!

时间: 2025-01-02 17:55:20

vue2路由的相关文章

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

1.写在前面 最近在学习Vue2,遇到有些页面请求数据需要用户登录权限.服务器响应不符预期的问题,但是总不能每个页面都做单独处理吧,于是想到axios提供了拦截器这个好东西,再于是就出现了本文. 2.具体需求 用户鉴权与重定向:使用Vue提供的路由导航钩子 请求数据序列化:使用axios提供的请求拦截器 接口报错信息处理:使用axios提供的响应拦截器 3.简单实现 3.1 路由导航钩子层面鉴权与重定向的封装 路由导航钩子所有配置均在router/index.js,这里是部分代码 import

结合项目学习vue2(路由vue-router,状态管理vuex)

前期: index.html <div id="app"> <h1>{{intro}}</h1> <router-view></router-view> </div> app.js var App = new Vue({ router,//router:router的缩写 //传一个路由属性给 Vue 实例,路由现在被定义为一个在 router 实例里的一个routes 选项数组 data: { intro: &q

vue2路由导航守卫(钩子函数)

所谓的Vue路由导航守卫,也就是我们常说的生命周期钩子函数,钩子函数的意思就是在特定的时刻,Vue会自动触发这个方法,我们可以通过这些个钩子函数,实现一些功能,比如,某些页面需要登录后才可以访问,某些页面需要用户达到什么等级才可以访问,又或者是跳转页面后修改一些信息等等,我们就可以通过路由导航守卫来拦截并做相应的处理 全局守卫: 挂载在router实例上 全局前置钩子 注意:参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察 $route 对象来应对这些变化,或使用 beforeRo

router基本使用

摘自:https://blog.csdn.net/qq_39894133/article/details/78992923 1.vue2 路由的使用流程: 1.vue2中的路由定义层:<router-linkto="/goods">商品</router-link> 这里用to指向路径表现层 1.1.<keep-alive>如果把切换出去的组件保留在内存中,可以保留它的状态或避免重新渲染.为此可以添加一个keep-alive指令 <keep-al

vue1与vue2的路由 以及vue2项目大概了解

vue1的路由 1.设置根组件  Vue.extend() 2.设置局部组件  Vue.extend({template:"/home"}) 3.实例化路由   var router =new VueRouter() 4.关联路由      router.map({"./",组件名字}) 5.开启路由     router.start("根组件","#box") 6.配置默认选项  router.redirect("

vue2.0 路由传参

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> <script src="../vue-router2.1.js"></script> </head> &

vue2.0 路由知识一

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="../vue2.2.js"></script> <script src="../vue-router2.1.js"></script> </head> &

Vue2+VueRouter2+webpack 构建项目实战(三):配置路由,运行页面

制作.vue模板文件 通过前面的两篇博文的学习,我们已经建立好了一个项目.问题是,我们还没有开始制作页面.下面,我们要来做页面了. 我们还是利用 http://cnodejs.org/api 这里公开的api来做项目.不过本章节不涉及调用接口等内容.这里,我们假设我们的项目是做俩页面,一个列表页面,一个内容页面.列表页面有分页等,内容页面展示. 因此,我们需要两个模板文件. 我们在src/page目录下面新建两个文件,分别是index.vue和content.vue index.vue代码: <

vue2.0 路由学习笔记

昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li a 为例 <ul> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> 使用 rou