精华内容
下载资源
问答
  • vue create router-app(filename) 或者 vue create . //后者是当前文件 cd router-app 安装vue-router yarn add vue-router 在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是...

    路由的配置


    1. 先搭建 vue 项目

       vue create router-app(filename)  或者 vue create .   //后者是当前文件
       cd router-app
      
    2. 安装vue-router

       yarn add vue-router
      
    3. 在src目录下创建一个router目录, 里面创建一个index.js文件 , 这个目录就是router的模块

    4. 在src/router/index.js中 引入需要的模块,并激活(注册)vue-router

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use( VueRouter ) //使用vue-router这个第三方插件
    

    注意:import这个关键字要放在整个文件的上层

    1. 在src/router/index.js,创建一个router对象实例,并且创建路由表
    /* 
      这个文件就是项目路由的配置文件
    */
    
    // 1. 引入需要的模块
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import routes from './routes'
    
    /*
      ! vue中插件的引入,要想和vue.js融合,那么我们必须使用Vue.use( 插件名称 )
    */
    
    // 2. 激活插件
    Vue.use( VueRouter )
    
    // 3. 得到router对象
    // const router = new VueRouter( optisons )
    const router = new VueRouter({
      mode: 'history', 
      // routes: [],路由表 路由的基本配置,一般是下面这个写法
      routes
    })
    
    // 4. 导出router模块
    export default router 
    
    1. 在src/router/routes.js中写路由表
    /* 
      ! 路由的懒加载 
        ! vue-router 懒加载是通过vue的异步组件和webpack的代码分割功能来完成的
    */
    const Home = () => import(/* webpackChunkName: "group-foo" */ '../pages/home')
    const Category = () => import(/* webpackChunkName: "group-foo" */ '../pages/category')
    const List = () => import(/* webpackChunkName: "group-foo" */ '../pages/list')
    const Detail = () => import(/* webpackChunkName: "group-foo" */ '../pages/detail')
    const ShopCar = () => import(/* webpackChunkName: "group-foo" */ '../pages/shopcar')
    const Mine = () => import(/* webpackChunkName: "group-foo" */ '../pages/mine')
    const Login = () => import(/* webpackChunkName: "group-foo" */ '../pages/login')
    const Register = () => import(/* webpackChunkName: "group-foo" */ '../pages/register')
    const Error = () => import(/* webpackChunkName: "group-foo" */ '../pages/error')
    const Recommend = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend')
    const Phone = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Phone')
    const Computer = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Computer')
    const Pad = () => import(/* webpackChunkName: "group-foo" */ '../pages/recommend/Pad')
    
    
    const routes = [// vue采用的还是传统的路由模式,一处管理,其他地方使用
      // {} 每一个对象就是一个路由的配置
      /* 
        ! 路由重定向: 从某一个路由自动跳转到另外路由
      */
      {
        path: '/',  // http://m.maoyan.com/   ->  http://m.maoyan.com/home
        redirect: '/home',//重定向
      },
      {
        path: '/home',//路由路径               http://localhost/home
        component:  Home, // 路由路径对应的组件 
        name: 'home'
      },
      {
        path: '/recommend',
        component: Recommend,
        name: 'recommend',
        children: [//子路由表(二级路由)
          {
            path: 'phone', //        /recommend/phone 注意:子路由不写 / 
            component: Phone,
            name: 'phone' 
          },
          {
            path: 'computer',
            component: Computer,
            name: 'computer'
          },
          {
            path: 'pad',
            component: Pad,
            name: 'pad'
          }
        ]
      },
      {
        path: '/category',
        component: Category,
        name: 'category'
      },
      {
        path: '/list',//这里路由路径不要给我写成大写    \
        component: List,
        name: 'list'
      },
      {
        path: '/detail',
        component: Detail,
        name: 'detail'
      },
      {
        path: '/shopcar',
        component: ShopCar,
        name: 'shopcar'
      },
      {
        path: '/mine',
        component: Mine,
        name: 'mine' 
      },
      {
        path: '/login',
        component: Login,
        name: 'login' 
      },
      {
        path: '/register',
        component: Register,
        name: 'register'
      },
      /*
        ! 错误路由匹配,记住这个配置要放在路由表的最下面
      */
      {
        path: '*',
        component: Error 
      }
    ]
    
    
    export default routes 
    
    1. 在入口文件main.js中引入路由实例 router , 然后在根实例中注册
    /* ! 我们main.js入口文件中使用router */
    import router from './router'
    
    new Vue({
      router,//注入路由,注入路由的目的是为了然整个项目中每一个组件都可以使用路由的属性
      render: h => h(App),
    }).$mount('#app')
    
    1. 在src/pages下建相应界面文件
    //eg:mine
    <template>
      <div>
        我的
      </div>
    </template>
    
    1. router-link 和 router-view 使用,在 src/layout/index.vue 中
    <template>
      <div>
        <div class="container">
          <div class="row">
              <!--导航 -->
            <nav class="nav nav-pills nav-fill">
              <router-link 
                v-for = "nav in navs" 
                :key = "nav.id"
                :to = "nav.path"  active-class = "active" class="nav-item nav-link" 
              > {{ nav.text }} </router-link>
              <!-- <router-link 
                v-for = "nav in navs" 
                :key = "nav.id"
                :to = "{   //路由传参
                  name: nav.name,
                  params: {
                    id: 1
                  },
                  query: {
                    a: 1,
                    b: 2
                  } 
                }"  active-class = "active" class="nav-item nav-link" 
              > {{ nav.text }} </router-link> -->
            </nav>
          </div>
    
          <div class="row" id ="router-content">
            <!-- 路由展示区域  router-view 内置组件-->
            <!-- <keep-alive include="Home"> -->
            <!-- <keep-alive include="Home"> -->
              <router-view></router-view>
            <!-- </keep-alive> -->
          </div>
    
        </div>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
          navs: [
            {
              id: 1,
              path: '/home',
              text: '首页',
              name: 'home'
            },
            {
              id: 2,
              path: '/recommend',
              text: '9.9包邮',
              name: 'recommend'
            },
            {
              id: 3,
              path: '/category',
              text: '分类',
              name: 'category'
            },
            {
              id: 4,
              path: '/shopcar',
              text: '购物车',
              name: 'shopcar'
            },
            {
              id: 5,
              path: '/mine',
              text: '我的',
              name: 'mine'
            }
          ]
        }
      }
    }
    </script>
    
    <style lang="stylus" scoped>
      #router-content 
        margin-top 20px 
        padding: 15px 
        overflow hidden
      .active 
        background red!important 
    </style>
    
    1. 在App.vue中,使用layout
    <template>
      <div id="app">
        <lay-out></lay-out>
      </div>
    </template>
    
    <script>
    import LayOut from './layout'
    export default {
      name: 'app',
      components: {
        LayOut
      }
    }
    </script>
    
    注:路由懒加载、二级路由、路由重定向、错误路由匹配、组件缓存在me的下一篇博客中
    展开全文
  • Vue-vue-router

    2021-09-03 21:01:51
    1. 什么是 vue-router vue-routervue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目 中组件的切换。 vue-router 的官方文档地址:https://router.vuejs.org/zh/ 2. vue-...

    1. 什么是 vue-router

    vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目
    中组件的切换。
    vue-router 的官方文档地址:https://router.vuejs.org/zh/

    2. vue-router 安装和配置的步骤

    ① 安装 vue-router 包
    ② 创建路由模块
    ③ 导入并挂载路由模块
    ④ 声明路由链接和占位符

    2.1 在项目中安装 vue-router

    在 vue2 的项目中,安装 vue-router 的命令如下:
    在这里插入图片描述
    创建成功
    在这里插入图片描述

    2.2 创建路由模块

    在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:
    在这里插入图片描述

    // src/router/index.js 就是当前项目的路由模块
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 把 VueRouter 安装为 Vue 项目的插件
    // Vue.use() 函数的作用,就是来安装插件的
    Vue.use(VueRouter)
    
    // 创建路由的实例对象
    const router=new VueRouter()
    
    //向外界共享路由实例
    export default router
    

    2.3 导入并挂载路由模块

    在 src/main.js 入口文件中,导入并挂载路由模块。示例代码如下:
    在这里插入图片描述

    2.4 声明路由链接和占位符

    在 src/App.vue 组件中,使用 vue-router 提供的 和 声明路由链接和占位符:
    在这里插入图片描述

    3. 声明路由的匹配规则

    在 src/router/index.js 路由模块中,通过 routes 数组声明路由的匹配规则。示例代码如下:
    在这里插入图片描述

    1. 路由重定向

    路由重定向指的是:用户在访问地址 A 的时候,强制用户跳转到地址 C ,从而展示特定的组件页面。
    通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便地设置路由的重定向:
    在这里插入图片描述

    2. 嵌套路由

    通过路由实现组件的嵌套展示,叫做嵌套路由。
    在这里插入图片描述
    在这里插入图片描述

    3.1 声明子路由链接和子路由占位符

    在 About.vue 组件中,声明 tab1 和 tab2 的子路由链接以及子路由占位符。示例代码如下:
    在这里插入图片描述

    3.2 通过 children 属性声明子路由规则

    在 src/router/index.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则:
    在这里插入图片描述

    4.1 动态路由的概念

    动态路由指的是:把 Hash 地址中可变的部分定义为参数项,从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号(:)来定义路由的参数项。示例代码如下:
    在这里插入图片描述

    4.2 $route.params 参数对象

    在动态路由渲染出来的组件中,可以使用 this.$route.params 对象访问到动态匹配的参数值。
    在这里插入图片描述

    4.3 使用 props 接收路由参数

    为了简化路由参数的获取形式,vue-router 允许在路由规则中开启 props 传参。示例代码如下:
    在这里插入图片描述

    5. 声明式导航 & 编程式导航

    在浏览器中,点击链接实现导航的方式,叫做声明式导航。例如:
    ⚫ 普通网页中点击 链接、vue 项目中点击 都属于声明式导航
    在浏览器中,调用 API 方法实现导航的方式,叫做编程式导航。例如:
    ⚫ 普通网页中调用 location.href 跳转到新页面的方式,属于编程式导航

    5.1 vue-router 中的编程式导航 API

    vue-router 提供了许多编程式导航的 API,其中最常用的导航 API 分别是:
    ① this. r o u t e r . p u s h ( ′ h a s h 地 址 ′ ) ⚫ 跳 转 到 指 定 h a s h 地 址 , 并 增 加 一 条 历 史 记 录 ② t h i s . router.push('hash 地址') ⚫ 跳转到指定 hash 地址,并增加一条历史记录 ② this. router.push(hash)hashthis.router.replace(‘hash 地址’)
    ⚫ 跳转到指定的 hash 地址,并替换掉当前的历史记录
    ③ this.$router.go(数值 n)
    ⚫ 实现导航历史前进、后退

    5.2 $router.push

    调用 this.$router.push() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。示例代码如下:
    在这里插入图片描述

    5.3 $router.replace

    调用 this.$router.replace() 方法,可以跳转到指定的 hash 地址,从而展示对应的组件页面。
    push 和 replace 的区别:
    ⚫ push 会增加一条历史记录
    ⚫ replace 不会增加历史记录,而是替换掉当前的历史记录

    5.4 $router.go

    调用 this.$router.go() 方法,可以在浏览历史中前进和后退。示例代码如下:
    在这里插入图片描述

    5.5 $router.go 的简化用法

    在实际开发中,一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法:
    ① $router.back()
    ⚫ 在历史记录中,后退到上一个页面
    ② $router.forward()
    ⚫ 在历史记录中,前进到下一个页面

    6. 导航守卫

    导航守卫可以控制路由的访问权限。示意图如下:
    在这里插入图片描述

    6.1 全局前置守卫

    每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行
    访问权限的控制:
    在这里插入图片描述

    6.2 守卫方法的 3 个形参

    全局前置守卫的回调函数中接收 3 个形参,格式为:
    在这里插入图片描述

    6.3 next 函数的 3 种调用方式

    参考示意图,分析 next 函数的 3 种调用方式最终导致的结果:
    在这里插入图片描述
    当前用户拥有后台主页的访问权限,直接放行:next()
    当前用户没有后台主页的访问权限,强制其跳转到登录页面:next(’/login’)
    当前用户没有后台主页的访问权限,不允许跳转到后台主页:next(false)

    6.4 控制后台主页的访问权限

    在这里插入图片描述

    全部代码如下:

    在这里插入图片描述
    App2.vue

    <template>
      <div class="app-container">
        <h1>App2 组件</h1>
    	 <!-- 当安装和配置了 vue-router 后,就可以使用 router-link 来替代普通的 a 链接了 -->
    	    <!-- <a href="#/home">首页</a> -->
    	    <router-link to="/home">首页</router-link>
    	    <!-- 注意1:在 hash 地址中, / 后面的参数项,叫做“路径参数” -->
    	    <!-- 在路由“参数对象”中,需要使用 this.$route.params 来访问路径参数 -->
    	
    	    <!-- 注意2:在 hash 地址中,? 后面的参数项,叫做“查询参数” -->
    	    <!-- 在路由“参数对象”中,需要使用 this.$route.query 来访问查询参数 -->
    	
    	    <!-- 注意3:在 this.$route 中,path 只是路径部分;fullPath 是完整的地址 -->
    	    <!-- 例如: -->
    	    <!-- /movie/2?name=zs&age=20 是 fullPath 的值 -->
    	    <!-- /movie/2 是 path 的值 -->
    	    <router-link to="/movie/1">洛基</router-link>
    	    <router-link to="/movie/2?name=zs&age=20">雷神</router-link>
    	    <router-link to="/movie/3">复联</router-link>
    	    <router-link to="/about">关于</router-link>
      <!--  <a href="#/home">首页</a>
    	<a href="#/movie">电影</a>
    	<a href="#/about">关于</a> -->
        <hr />
    	
    	<!-- 只要在项目中安装和配置了 vue-router,就可以使用 router-view 这个组件了 -->
        <!-- 它的作用很单纯:占位符 -->
    	<router-view>
    		
    	</router-view>
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style lang="less" scoped>
    .app-container {
      background-color: #efefef;
      overflow: hidden;
      margin: 10px;
      padding: 15px;
      > a {
        margin-right: 10px;
      }
    }
    </style>
    
    

    main.js

    import Vue from 'vue'
    import App from './App2.vue'
    // 导入路由模块,目的:拿到路由的实例对象
    // 在进行模块化导入的时候,如果给定的是文件夹,则默认导入这个文件夹下,名字叫做 index.js 的文件
    import router from '../router/index.js'
    
    // 导入 bootstrap 样式
    import 'bootstrap/dist/css/bootstrap.min.css'
    // 全局样式
    import '@/assets/global.css'
    
    Vue.config.productionTip = false
    
    new Vue({
      render: h => h(App),
      // 在 Vue 项目中,要想把路由用起来,必须把路由实例对象,通过下面的方式进行挂载
      // router: 路由的实例对象
      router
    }).$mount('#app')
    
    

    src/router/index.js

    // src/router/index.js 就是当前项目的路由模块
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    // 导入需要的组件
    import Home from '@/components/Home.vue'
    import Movie from '@/components/Movie.vue'
    import About from '@/components/About.vue'
    
    import Tab1 from '@/components/tabs/Tab1.vue'
    import Tab2 from '@/components/tabs/Tab2.vue'
    
    import Login from '@/components/Login.vue'
    import Main from '@/components/Main.vue'
    // 把 VueRouter 安装为 Vue 项目的插件
    // Vue.use() 函数的作用,就是来安装插件的
    Vue.use(VueRouter)
    
    // 创建路由的实例对象
    const router = new VueRouter({
    	// routes 是一个数组,作用:定义 “hash 地址” 与 “组件” 之间的对应关系
    	routes: [{
    			path: '/',
    			redirect: '/home'
    		},
    		{
    			path: '/home',
    			component: Home
    			
    		},
    		//为路由规则开启传参,从而方便拿到路由规则里面参数的值
    		{
    			path: '/movie/:id',
    			component: Movie,
    			props:true
    		},
    		{
    			path: '/about',
    			component: About,
    			redirect: '/about/tab1',
    			children: [
    				//子路由规则
    				// 子路由规则
    				// 默认子路由:如果 children 数组中,某个路由规则的 path 值为空字符串,则这条路由规则,叫做“默认子路由”
    				// { path: '', component: Tab1 },
    				{
    					path: 'tab1',
    					component: Tab1
    				},
    				{
    					path: 'tab2',
    					component: Tab2
    				}
    			]
    		},
    		{path:'/login',component:Login},
    		{path:'/main',component:Main}
    	]
    })
    
    // 为 router 实例对象,声明全局前置导航守卫
    // 只要发生了路由的跳转,必然会触发 beforeEach 指定的 function 回调函数
    router.beforeEach(function(to,from,next){
    	// to 表示将要访问的路由的信息对象
    	  // from 表示将要离开的路由的信息对象
    	  // next() 函数表示放行的意思
    	  // next()
    	  // console.log(to)
    	  // 分析:
    	  // 1. 要拿到用户将要访问的 hash 地址
    	  // 2. 判断 hash 地址是否等于 /main。
    	  // 2.1 如果等于 /main,证明需要登录之后,才能访问成功
    	  // 2.2 如果不等于 /main,则不需要登录,直接放行  next()
    	  // 3. 如果访问的地址是 /main。则需要读取 localStorage 中的 token 值
    	  // 3.1 如果有 token,则放行
    	  // 3.2 如果没有 token,则强制跳转到 /login 登录页
    	   if (to.path === '/main') {
    	      // 要访问后台主页,需要判断是否有 token
    	      const token = localStorage.getItem('token')
    	      if (token) {
    	        next()
    	      } else {
    	        // 没有登录,强制跳转到登录页
    	        next('/login')
    	      }
    	    } else {
    	      next()
    	    }
    })
    
    //向外界共享路由实例
    export default router
    
    

    about.Vue

    <template>
      <div class="about-container">
        <h3>About 组件</h3>
    	
    	<hr />
    	<!-- 子集路由链接 -->
    	<router-link to="/about/tab1">tab1</router-link>
    	<router-link to="/about/tab2">tab2</router-link>
    	
    	<!-- 子集路由占位符 -->
    	<router-view></router-view>
    	
      </div>
    </template>
    
    <script>
    export default {
      name: 'About'
    }
    </script>
    
    <style lang="less" scoped>
    .about-container {
      min-height: 200px;
      background-color: skyblue;
      padding: 15px;
      > a {
        margin-right: 10px;
      }
    }
    </style>
    
    

    Home.vue

    <template>
      <div class="home-container">
        <h3>Home 组件</h3>
    	<hr />
    	
    	<button @click="gotoLK">push跳转到"洛基"页面</button>
    	<button @click="gotoLK2">replace跳转到"洛基"页面</button>
    	
    	<router-link to="/main">访问后台主页</router-link>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      methods:{
    	  gotoLK(){
    		  //通过编程式导航API,导航跳转指定的页面
    		  this.$router.push('/movie/1')
    	  },
    	  gotoLK2(){
    		  this.$router.replace('/movie/1')
    	  }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .home-container {
      min-height: 200px;
      background-color: pink;
      padding: 15px;
    }
    </style>
    
    

    Login.vue

    <template>
    	<div>
    		<h3>Login登录页面</h3>
    	</div>
    	
    </template>
    
    <script>
    	export default{
    		
    	}
    	
    </script>
    
    <style>
    </style>
    
    

    Main.vue

    <template>
    	<div>
    		<h3>Main后台主页,未登录不允许访问!!!</h3>
    	</div>
    </template>
    
    <script>
    	export default{
    		
    	}
    	
    </script>
    
    <style>
    </style>
    
    

    Movie.vue

    <template>
      <div class="movie-container">
        <h3>Movie 组件---{{$route.params.id}}---{{id}}</h3>
    	
    	<button @click="showThis">打印 this</button>	
    	
    	<button @click="goback">后退</button>
    	
    	<!-- 在行内使用编程式导航跳转的时候,this 必须要省略,否则会报错! -->
    	    <button @click="$router.back()">back 后退</button>
    	    <button @click="$router.forward()">forward 前进</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Movie',
      
      props:['id'],
      methods:{
    	  showThis(){
    		  console.log(this)
    	  },
    	  goback(){
    		  //表示后退一层,后退层数超过上限则原地不懂
    		  this.$router.go(-1)
    	  }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .movie-container {
      min-height: 200px;
      background-color: lightsalmon;
      padding: 15px;
    }
    </style>
    
    
    展开全文
  • Vue Router

    2020-05-13 22:08:51
    Vue Router使用 路由就是你要访问哪个页面的地址,我们需要在router.js中配置组件的路由地址。path就是访问该组件的地址, component表示对应哪个组件 。然后我们访问 localhost:8080/list 就来到了list这个组件。 /...

    Vue Router使用

    路由就是你要访问哪个页面的地址,我们需要在router.js中配置组件的路由地址。path就是访问该组件的地址,

    component表示对应哪个组件 。然后我们访问 localhost:8080/list 就来到了list这个组件。

    /edit/:id 是动态路由,相当于java中的/edit/{id} 形式,当你访问需要 /edit/1 这样

    export default new Router({
      mode: 'history',
      base: process.env.BASE_URL,
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home
        },{
          path: '/list',
          name: 'list',
          component: () => import('./views/watch-router/List')
        },
        {
          path: '/edit/:id',
          name: 'edit',
          component: () => import('./views/watch-router/Edit'),
          meta:{
            hidden:true
         }
        }
       }
    
    

    路由用法

    将路由在main.js中挂载到Vue之后。在每一个Vue组件中可以使用this.$route获取当前的路由。

    比如你访问 localhost:8080/edit/1?type=edit 来到edit组件。

    通过this.$route可以获取当前的路由对象。

    this.$route.fullPath; 获取当前全路径,包括请求的参数

    this.$route.query 获得所有的查询参数,然后通过.type的形式获取每一个参数

    this.$route.params获取所有的动态参数。可以使用.id的形式获取

    你也可以在data中直接使用this.$route.query來將参数赋值给你定义的属性

     data() {
         return {
         //站点ID
         site_uuid: this.$route.query.site_uuid,
         //页面类型(新增/修改)
         type: this.$route.query.type
         }
      }
    
     export default {
        name: "Edit",
        created() {
        // /edit/1?type=edit 全路径包括动态参数和请求参数
        console.log(this.$route.fullPath)
        console.log(this.$route.hash)
        // 定义的元数据
        console.log(this.$route.meta)
        // /edit/1 包括动态参数的路由
        console.log(this.$route.path)
        // {type: "edit"} query是后面的查询参数
        console.log(this.$route.query)
        console.log(this.$route.query.type)
        // {id: "1"}  params是动态路由
        console.log(this.$route.params)
        console.log(this.$route.params.id)
        },
        watch: {
        $route(to,from) {
        console.log("监听路由变化--------")
        console.log(to)
        console.log(from)
        }
        }
     }
    

    使用Router来跳转

    在一个页面中,我要跳转到一个页面去,有两种方式:一个是使用标签来跳转,to中就是组件的路由地址,也可以v-bind绑定值。另外一种是使用$router.push("/path") 来跳转

    下面是在list组件中的一个按钮,有一个点击事件,使用$router.push去edit组件

    <button @click="$router.push('/edit/1?type=edit')">编辑</button>

    下面是在edit组件的一个按钮,通过$router.go(-1) 来返回上次的页面

    <button @click="$router.go(-1)">goback</button>

    $router.push()中的参数可以有多种写法,可以传一个对象,

    <button @click="edit()">编辑</button>
    
    edit(){
        this.$router.push({
            path: '/edit/1',
            query:{
            	type:"edit"
        	}
    	})
    }
    

    <router-view/>

    当来到一个组件之后,这个组件在哪里展示呢?router-view就是路由的出口.

    下面的是我们的app.vue中内容,你的组件就会显示到router-view这

    <template>
      <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link> |
            <router-link to="/about">About</router-link>
        </div>
        <router-view/>
      </div>
    </template>
    

    嵌套路由

    在你自定义的组件中也可以使用,这个出口是用于这个组件的子组件的渲染.

    下面这个列子 在user组件中有一个router-view,他有一些子组件,这些子组件渲染到user中router-view位置上。当子组件的path没有/的话,他的路由是父组件的path加上自己的path,如果有/的话,他的路由就是自己的路由

    const router = new VueRouter({
      routes: [
        { path: '/user/:id', component: User,
          children: [
            {
              // 当 /user/:id/profile 匹配成功,
              // UserProfile 会被渲染在 User 的 <router-view> 中
              path: 'profile',
              component: UserProfile
            },
            {
              // 当 /user/:id/posts 匹配成功
              // UserPosts 会被渲染在 User 的 <router-view> 中
              path: 'posts',
              component: UserPosts
            }
          ]
        }
      ]
    })
    
    展开全文
  • vue+vueRouter 实例demo

    万次阅读 2017-07-10 18:01:08
    main.js import Vue from 'vue' import App from './App.vue' import router from './router/router'... * @VueRouter:路由 */ /** * 定义常量信息 * @DOMAINNAME:客户端地址 * @SERVERNAME:服务端地址 *

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router/router'
    
    /**
     *  加载插件
     *  @VueRouter:路由
     */
    
    /**
     *  定义常量信息
     *  @DOMAINNAME:客户端地址
     *  @SERVERNAME:服务端地址
     *  @API_SERVER:服务端接口
     */
    
    let DOMAINNAME = ''
    let SERVERNAME = ''
    let API_SERVER = ''
    /**
     *  全局方法
     */
    
    
    //获取当前页面路由信息
    router.afterEach(function (transition) {
        console.log("当前路由参数")
        console.log(transition)
    })
    
    /**
     *  创建实例
     */
    new Vue({
        router,
        render: h => h(App)
    }).$mount('#app')
    
    路由文件router/router.js

    /**
     *  路由文件
     *  引入[Vue, VueRouter]模块
     */
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    /**
     *  加载模块
     */
    Vue.use(VueRouter)
    
    /**
     *  配置路由
     */
    
    const router = new VueRouter({
        routes:[
            {   //登录页面
                path:'/login',
                name:'login',
                title:'vue login',
                component:function (resolve) {
                    require(['../components/login.vue'], resolve)
                }
            },
            {   //主页面
                path:'/home',
                name:'home',
                title:'home',
                component:function (resolve) {
                    require(['../components/home.vue'], resolve)
                }
            },
            {   //个人中心页面
                path:'/userInfo',
                name:'userInfo',
                title:'userInfo',
                component:function (resolve) {
                    require(['../components/userInfo/userInfo.vue'], resolve)
                }
            }
        ]
    })
    
    export  default  router
    工具类kit/cookie.js

    import Vue from 'vue'
    
    Vue.prototype.setCookie = function (name, value, day) {
        let date = new Date
        date.setTime(date.getTime() + 24*60*60*1000*day);
        window.document.cookie = name + "=" + value + ";path=/;expires=" + date.toGMTString();
    }
    Vue.prototype.getCookie = function (name) {
        let v = window.document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
        return v ? v[2] : null
    }
    Vue.prototype.delCookie = function (name) {
        let date = new Date
        date.setTime(date.getTime() - 1)
        let val = this.getCookie(name)
        if(val != null){
            document.cookie= name + "="+val+";expires="+date.toGMTString();
        }
    
    }

    主程序app.vue

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      created (){
        let vue = this
          vue.$router.push('./login')
      },
      name: 'app',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    
    <style lang="scss">
    *{ margin:0;  padding:0;}
    html,body{overflow: hidden}
    #app{width: 1024px;margin: 0 auto;border:1px solid #D9D9D9;border-top:none;height: 100%;}
    </style>
    
    login.vue

    <template>
        <div id="Login">
            <!--引用头部组件-->
            <Top></Top>
    
            <form class="form-group box-shadow">
                <div class="input-group">
                    <label class="input-label">账号</label>
                    <input type="text" v-model="name" name="name" placeholder="请输入123456789"/>
                </div>
    
                <div class="input-group">
                    <label class="input-label">密码</label>
                    <input type="password" v-model="pwd" name="pwd" placeholder="请输入123456789"/>
                </div>
    
                <div class="button-group">
                    <button class="min-button" type="button" @click="login">登录</button>
                    <span class="button-span">没有账户?<a href="javascript:void(0)" @click="register">立即注册</a></span>
                </div>
            </form>
    
        </div>
    </template>
    
    <script>
        import Top from './layout/header.vue'
        import Cookie from '../kit/cookie'
        export default {
            components: {
                Top
            },
            created () {
                let vue, loginStatus
                vue = this
                loginStatus = vue.getCookie("loginStatus")
                if(loginStatus){
                    console.log("之前登录过")
                    setTimeout(function () {
                        vue.$router.push({name:'home', params:{msg:"自动登录",user:vue.$data.name}})
                    },2000)
    
                } else {
                    console.log("没有登录过")
                }
    
            },
            data () {
                return {
                    name:null,
                    pwd:null
                }
            },
            methods: {
                login () {
                    let vue, name, pwd
                    vue = this
                    name = vue.$data.name
                    pwd = vue.$data.pwd
    
                    if(!name || !pwd) {
                       console.log("不能为空")
                        return
                    } else {
                       if(name === '123456789' && pwd === '123456789'){
    
                           vue.setCookie("loginStatus",true,1)
    
                           vue.$router.push('./home')
                       } else {
                           console.log("用户名密码输入有误")
                       }
                    }
                },
                register () {
                    let vue = this
                    console.log("这是一个空的事件哦!")
                }
            }
        }
    </script>
    
    <style>
    *{font-size: 13px;}
    #Login .form-group{border:1px solid #D9D9D9;width:400px;margin: 0 auto;padding: 10px}
    #Login .input-group{width: 100%;padding: 5px 0}
    #Login .input-label{display: inline-block;height: 35px;line-height: 35px;padding: 0 5px;width: 10%;float: left}
    #Login .input-group input{width: 85%;height:35px;border:1px solid #D9D9D9;border-radius: 2px;background: none;text-indent: 15px;}
    #Login .button-group button{background:none;border:1px solid #D9D9D9;min-width: 80px;min-height: 30px;}
    #Login .button-group .min-button{}
    #Login .box-shadow{box-shadow:3px 4px 5px 2px #D9D9D9,1px 1px 10px 2px #D9D9D9;border:1px solid #D9D9D9}
    #Login .button-span{float: right;height: 30px;line-height: 30px;}
    </style>

    home.vue

    <template>
        <div id="Home">
            <p>欢迎{{userMsg}}用户<a href="javascript:void(0)">{{userName}}</a> <span class="cancellation" @click="cancellation">注销</span></p>
    <hr>
            <p>第二次会自动登录,请留意上方的普通/金卡文字,请在电脑端开dubug模式,每一步骤都有日志!</p>
    
        </div>
    </template>
    
    <script>
        import Cookie from '../kit/cookie'
        export default {
            components: {},
            created () {
                let vue, parameter
                vue = this
                parameter = vue.$route.params
                console.log(parameter)
                vue.$data.userName = vue.$route.params.user
                if(parameter.msg){
                    vue.$data.userMsg = "金卡"
                } else {
                    vue.$data.userMsg = "普通"
                }
            },
            data () {
                return {
                    userName:"",
                    userMsg:""
                }
            },
            methods: {
                cancellation () {
                    let vue = this
                    console.log("注销登录")
                    vue.delCookie('loginStatus')
                    setTimeout(function () {
                        vue.$router.push('./login')
                    },1000)
                }
            }
        }
    </script>
    
    <style>
    
    #Home p{font-size: 15px;padding: 20px;color: red;font-weight: bold}
    
    #Home .cancellation{float: right;}
    </style>


    以上为效果图,未使用UI框架。

    # install dependencies
    npm install
    
    # serve with hot reload at localhost:8080
    npm run dev
    
    # build for production with minification
    npm run build

    For detailed explanation on how things work, consult the [docs for vue-loader]

    项目包含分离的路由 Router 


    项目包含分离的工具类 Kit


    gitHub地址

    git@github.com:Apache-Ra/ra-vue-demo.git


    用于交流互相学习,不喜勿喷。



    展开全文
  • vue-router

    2021-05-21 19:12:30
    Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转; 先说一下...
  • 1、vue-router:index.js import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) import Layout from '@/layout' export const routes = [{ path: '/', component: Layout, hidden:...
  • vue+router

    2018-03-07 21:46:33
    ‘npm install vue-routerrouter.js import Login from './components/login/Login.vue' import Home from './components/Home.vue' //系统管理 import Manager from './components/systemManagemen...
  • Vue入门之extend全局方法ul, li { list-style: none; }ul { overflow: hidden; }li { float: left; width: 100px; }h2 { background-color: #903;}email to: {{ email }}var topbarTemp = `{{ item.name }}`;// 定义...
  • vue-router 使用

    2021-02-25 11:16:29
    import VueRouter from 'vue-router' Vue.use(VueRouter) new Vue({ render: h => h(App), }).$mount('#app') 2.实例化一个vue-router import VueRouter from 'vue-router' import MainV
  • import Router from 'vue-router' Vue.use(Router) import Layout from '@/layout' /* Router Modules 模块*/ import systemRouter from './module/system' import gameRouter from './module/game' import ...
  • Vue Router学习笔记

    2020-12-21 19:36:46
    1 vue-router模式 vue-router默认hash模式,就是带个很丑的#号,当url改变时,页面不会重新加载。一般在项目中会选择history模式,这种模式利用history.pushState来完成URL跳转而无须重新加载页面。 const ...
  • Vue RouterVue.js 官方的路由管理器,主要功能:让构建单页面应用变得更简单。 实例 首先要下载 vue-router npm install vue-router --save 在src下创建router 文件 index.js import Vue from 'vue'; //引入VUE ...
  • const createRouter = () => new VueRouter({ linkActiveClass: 'active', mode: 'hash', base: './', routes: constantRouterMap }); const router = createRouter(); // 添加其他项目路由前,重置 ...
  • VUEvue-router常见面试题

    千次阅读 2021-01-15 10:42:50
    1.vue-router怎么重定向的? 在routes:[{{ path: '/a', redirect: '/b' }}] 2.vue-router 是什么?它有哪些组件 答:vue用来写路由一个插件。有router-link、router-view 3.active-class 是哪个组件的属性? 答...
  • 巧用v-viewer实现带图片预览业务功能ocr智能下单(物流行业)实现技术:vue + vue-router+vue-resource + element-ui核心组件:v-viewer最终实现效果(实现技术vue)实现思路实现步骤s全局引入v-viewer技术参考: ...
  • Vue-router 笔记

    2021-04-13 17:08:55
    Vue-Router 笔记 使用 import Vue from 'vue'; import Router from 'vue-router'; ​ Vue.use(Router); const router = new Router({ config }); ​ new Vue({ router, render: h => h(); }).$mount('#app')...
  • redirect 重定向 在父子嵌套结构中,父级的redirect指向子级children里的path meta 元数据 可以作用判断用户是否已登陆 可以通过meta值,展示面包屑
  • Vue router嵌套路由

    2021-07-28 14:43:49
    vue路由,父子路由配置router 运营管理系统 记录一下 { path: '/doctor', component: Layout, hidden: true, //redirect: 'noredirect', meta: { title:'医生社区管理' }, children: [ { path: 'community',...
  • vue-router基础篇整理

    2020-03-03 10:25:59
    如果使用模块化机制编程,导入VueVueRouter,要调用 Vue.use(VueRouter) import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 1. 定义 (路由) 组件。 // 可以从其他文件 import 进来 ...
  • 好的,我们这里废话不多说,直接开始今天得vue-router得使用心得分享 这篇文章我们不讲router得基本知识,我们讲再项目中怎么方便得使用vue-router. //首先这里先创建一个router.js文件,再router.js文件中引入vue...
  • 项目采用的是VueRouter3.0.1作为路由。下面对vueRouter的配置进行一个详细的记录
  • 【07】 vueVue-router

    2019-10-07 09:58:55
    注意: vue-router@2.x 只适用于 Vue 2.x 版本。 vue-router@1.x 对应于Vue1.x版本。 的Github地址:vue-router 文档地址 7.2. vue-router的安装使用 CDN连接方式 ...
  • Vue router 权限整理

    2020-08-05 22:19:02
    Vue router 权限整理权限控制方式与思路与实现 权限控制方式与思路与实现 首先我们把权限分为几部分,大体方式如下图所示: 下面根据一个小demo展开 demo下载地址 这里采用菜单与路由分离,菜单由后端返回的方式实现...
  • vue+vueRouter+Element

    千次阅读 2017-07-17 21:21:29
    此项目提供项目框架组件方案,适合初学者。由于公司项目紧张,这是晚上下班写了一点点。项目结构图main.js/** * 导入文件 * @Vue: vue * @Vuex: vue的一种状态管理模式 ... * @router: 路由文件 */ import Vue ...
  • Vue动态生成Router

    2019-09-30 15:04:49
    Vue RouterVue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,一般直观体现在页面的侧边路由中,依照RBAC模型动态地为不同用户生成不同的路由配置。 实现思路 用户登录后...
  • vuevue-router的用法

    2017-11-21 15:59:00
    依赖安装:(c)npm install vue-router 过程: import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router) 使用new Router()定义一个路由,并export 在main.js中import该路由, 将定义个的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,370
精华内容 2,148
关键字:

hiddenroutervue

vue 订阅