精华内容
下载资源
问答
  • vue-route

    2021-04-12 10:36:47
    vue-route vue-route详解 基础用法 //被vm实例所控制的区域 <router-link to="/user">user</router-link> //路由占位符 <router-view></router-view> //创建路由实例对象 const router = ...

    vue-route

    vue-route详解
    基础用法

    //被vm实例所控制的区域
    <router-link to="/user">user</router-link>
    //路由占位符
    <router-view></router-view>
    //创建路由实例对象
    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         {path:'/user',component:User}
      ]
    })
    //创建vm实例对象
    const vm = new Vue({
      el:"#app",
      data:{},
      router   //挂载路由实例对象
    })
    

    嵌套路由

    const User = {
      template:`<div><router-link to="/user/tab1"></router-link> <router-view></router-view></div>`
    }
    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         {path:'/user',component:User,children:[
           //子路由规则
               {path:'/user/tab1',component:Tab1}
          ]}
      ]
    })
    

    动态匹配路由基本用法

    应用

    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         //动态路径参数,以冒号开头
         {path:'/user/:id',component:User}
      ]
    })
    const User = {
    //路由组件中通过$route.params获取路由参数
      template:'<div>User {{$route.params.id}}</div>'
    }
    

    $route与对应路由形成高度耦合,不够灵活,所以使用props将组件和路由解耦
    方式1 props的值为布尔类型

    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         //动态路径参数,以冒号开头
         {path:'/user/:id',component:User,props:true}
      ]
    })
    const User = {
    props:['id'],//使用props接收路由参数
    //路由组件中通过$route.params获取路由参数
      template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
    }
    

    方式2 props的值为对象类型

    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         //动态路径参数,以冒号开头
         {path:'/user/:id',component:User,props:{name:'lisi',age:12}}
      ]
    })
    const User = {
    props:['name','age'],//使用props接收路由参数
    //路由组件中通过$route.params获取路由参数
      template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
    }
    

    方式3 props的值为函数类型

    const router = new VueRouter({
    //所有的路由规则
      routes:[
         {path:'/',redirect:'/user'},  //路由重定向
         //动态路径参数,以冒号开头
         {path:'/user/:id',
         component:User,
         props:route=>({name:'lisi',age:12,id:route.params.id})}
      ]
    })
    const User = {
    props:['name','age','id'],//使用props接收路由参数
    //路由组件中通过$route.params获取路由参数
      template:'<div>用户Id:  {{id}}</div>'  //使用路由参数
    }
    

    编程式导航参数规则

    router.push()方法的参数规则

    router.push('/home')
    router.push({path:'/home'})
    router.push({name:'/user',params:{userId:123}})
    router.push({path:'/register',query:{uname:"lisi"}})
    
    展开全文
  • import Vue from 'vue'import VueRouter from'vue-router'Vue.use(VueRouter)const Home= { template: 'home'}const Foo= { template: 'foo'}const Bar= { template: 'bar'}/*** Signatre of all route guards:* @pa...

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

    const Home= { template: '

    home
    '}

    const Foo= { template: '

    foo
    '}

    const Bar= { template: '

    bar
    '}/**

    * Signatre of all route guards:

    * @param {Route} route

    * @param {Function} redirect - redirect to another route

    * @param {Function} next - confirm the route*/

    functionguardRoute (route, redirect, next) {if (window.confirm(`Navigate to ${route.path}?`)) {

    next()

    }else if (window.confirm(`Redirect to /baz?`)) {

    redirect('/baz')

    }

    }//Baz implements an in-component beforeRouteLeave hook

    const Baz ={

    data () {return { saved: false}

    },

    template: `

    baz ({{ saved ? 'saved' : 'not saved' }})

    save

    `,

    beforeRouteLeave (route, redirect, next) {if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {

    next()

    }

    }

    }//Baz implements an in-component beforeRouteEnter hook

    const Qux ={

    data () {return{

    msg:null}

    },

    template: `

    {{ msg }}
    `,

    beforeRouteEnter (route, redirect, next) {//Note that enter hooks do not have access to `this`

    //because it is called before the component is even created.

    //However, we can provide a callback to `next` which will

    //receive the vm instance when the route has been confirmed.

    // //simulate an async data fetch.

    //this pattern is useful when you want to stay at current route

    //and only switch after the data has been fetched.

    setTimeout(() =>{

    next(vm=>{

    vm.msg= 'Qux'})

    },300)

    }

    }

    const router= newVueRouter({

    mode:'history',

    base: __dirname,

    routes: [

    { path:'/', component: Home },//inline guard

    { path: '/foo', component: Foo, beforeEnter: guardRoute },//using meta properties on the route config

    //and check them in a global before hook

    { path: '/bar', component: Bar, meta: { needGuard: true}},//Baz implements an in-component beforeRouteLeave hook

    { path: '/baz', component: Baz },//Qux implements an in-component beforeRouteEnter hook

    { path: '/qux', component: Qux },//in-component beforeRouteEnter hook for async components

    { path: '/qux-async', component: resolve =>{

    setTimeout(()=>{

    resolve(Qux)

    },0)

    } }

    ]

    })

    router.beforeEach((route, redirect, next)=>{if (route.matched.some(m =>m.meta.needGuard)) {

    guardRoute(route, redirect, next)

    }else{

    next()

    }

    })newVue({

    router,

    template: `

    Navigation Guards

    • /
    • /foo
    • /bar
    • /baz
    • /qux
    • /qux-async

    `

    }).$mount('#app')

    展开全文
  • vue route

    2020-07-24 20:00:23
    1、安装vue router :npm install vue-router或cnpm install vue-router或yarn add vue-router 2、在src中新建router.js 3、吧下面代码引入到router.js中 import Vue from ‘vue’ import VueRouter from ‘vue-...

    1、安装vue router :npm install vue-router或cnpm install vue-router或yarn add vue-router
    2、在src中新建router.js
    3、吧下面代码引入到router.js中

    import Vue from ‘vue’
    import VueRouter from ‘vue-router’
    Vue.use(VueRouter)

    4、在src中新建view文件夹,在view新建Home文件夹,在文件夹中新建index.vue
    把下面代码写到 home/index.vue中

    5、在router.js中写

    import Home from ‘./views/Home/’
    export default new VueRouter ({
    routes: [
    {
    path: ‘/’,
    redirect: ‘/home’ //设置默认指向
    },
    {
    path: ‘/home’,
    component: Home
    }
    ]
    })

    6、在App.vue中的div内引入


    1
    7、在main.js中写 import router from ‘./router’
    具体如图所示
    在这里插入图片描述

    展开全文
  • 前言这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容。首先在main.js文件//引入vue-routerimportVueRouterfrom'vue-router';//引入组件importgoodsfrom'./components/goods/goods';...

    前言

    这篇文章给大家讲解的是在vue-cli脚手架中如何配置vue-router前端路由的相关内容。

    首先在main.js文件// 引入vue-routerimport VueRouter from 'vue-router';// 引入组件import goods from './components/goods/goods';import seller from './components/seller/seller';import ratings from './components/ratings/ratings';// 使用路由Vue.use(VueRouter);// 创建路由实例const router = new VueRouter({  routes: [    // path 路径; component组件;

    { path: '/goods', component: goods },

    { path: '/seller', component: seller },

    { path: '/ratings', component: ratings }

    ]

    });//最后挂载到vue实例上new Vue({  el: '#app',

    router,  components: { App },  template: ''});

    html代码样式

            商品
            商家
            评论

    指定打开页面

    为了与 HTML5 History API 保持一致性,router.go 已经被用来作为 后退/前进导航,router.push用来导向特殊页面。router.push('/goods');

    在创建VueRouter实例时候,可以添加一些配置

    AAffA0nNPuCLAAAAAElFTkSuQmCC

    作者:阿r阿r

    链接:https://www.jianshu.com/p/e9a7eb7afcdd

    展开全文
  • vue-router 配置路由用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由...
  • vue-route Vue-cli实战项目4 vue-router的封装 封装path和name 对nmae 完整代码 let routes = [ { path: '/', name: 'layout', redirect:{name:'index'},//定向到首页 //component: ()=>import('....
  • 介绍路由:控制组件之间的跳转,不会实现请求、不用页面刷新,直接跳转-切换组件》》》安装本地环境安装路由插件vue-router: cnpm install vue-router --save-dev配置两种配置方法:在main.js中 || 在src/router...
  • 安装cnpm install vue-router --save引入import vuerouter from vue-router使用vue.use()配置路由1、创建组建。 引入组建import VueRouter from 'vue-router';Vue.use(VueRouter);2、定义路由const routes = [{ path...
  • 话不多说,上代码:app.vue和index.vue中各有一个router-view,主入口进入程序后app.vue中的router-view根据路由配置默认加载index如果index.vue中的router-view想要加载optView,该怎么办呢?那就需要应用嵌套路由...
  • vue-router是vue.js官方的路由插件,里面组件和URL的映射关系由vue-router帮我们管理。在vue-router的单页面应用中,页面的路径的改变就是组件的切换。一:首先下载插件,当我们初始化项目时,有一个选项vue-router...
  • vue路由插件之vue-route

    2020-10-16 20:04:56
    主要介绍了vue路由插件之vue-route的相关知识,本文通过实例代码给大家介绍了vue router的使用,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 一、前言要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题。想阅读更多优质文章请猛...
  • vue - vue route demo

    2017-10-13 14:09:00
    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" />... vue route demo</title> </head> <body> <script src="https://unpkg.com...
  • vue路由vue-route

    2017-07-12 20:36:00
    首先先引入插件 <script src="Vue.js"></script>...script src="vue-route.js"></script> 然后写在页面展示的代码 <div id="div"> <ul> <li><a v...
  • add vue route

    2020-11-27 07:14:51
    <div><p>this adds the route we talked about on Slack.</p><p>该提问来源于开源项目:pymedusa/Medusa</p></div>
  • vuevue-route

    千次阅读 2018-05-02 13:52:11
    Vue路由是指:根据不同地址,创造不同页面。如单页面应用,不刷新整个页面,不频繁请求,请求数据,通过js操作(ajax),如:切换两个不同图片,不同地址,只需第一次需要请求,第2次共用请求资源,只需再请求一张...
  • vue(二)vue-route

    2020-08-11 09:49:03
    vue-route可实现单页面组件化跳转 例如在components文件夹下有test1.vue和helloworld.vue 如何将其组件化? 1.在route文件夹下的index.js里引入组件(注册): import Vue from 'vue' import Router from 'vue-...
  • vue.router和vue.route

    2020-12-04 18:35:28
    vue.js基础动态路由vue动态路由 vue.router 任何一个组件$router拿到的值都是一样的(所以才能进行push,replace操作) vue.route 表示当前正在活跃的路由
  • vue-route, 基于 Vue.js, 视图的路由指令 路由的vue路由已经停止。 请尝试使用官方的 vue路由器。基于 Vue.js, 视图的路由指令。 基于 v-component,可以从 v-transition 。keep-alive 。wait-for 。transition-mo
  • vueroute

    2019-07-27 15:17:21
    VUE路由 也就是vue-router 为了跳转页面 实现方式① hash原理 location href ②history 通过历史记录跳转 安装命令 cnmp install vue-router --save-dev 安装完成之后进入main.js配置 path路径component组件...
  • Vue route路由

    2020-07-23 21:37:37
    路由表的本质就是一个映射表,决定了数据包的指向 路由决定里路径跳转等问题 <template> <div class="home"> <ul> <router-link tag="li" to="/home/one">1<...route
  • v-router的注意事项使用name和params组合传参this.$router.push({name:'details', params: {'id':233}})注释:路由的配置import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new ...
  • Vue route的使用

    2019-04-25 11:02:00
    1、route.js文件 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/', name: 'login', ...
  • 想找一个Vue.js Vuex vue-route的学习项目来练手。做个电商App吧,上gitHub搜索了一下搜到一大堆,不过基本上都不是使用单文件组件开发的,更不用说基于Vue.js全家桶了。本项目不一样的地方在于使用vue-cli + ...
  • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue-router</title> </head> <body> <div id="app"> &l...
  • Change Vue route from Blaze

    2020-11-23 11:14:07
    <div><p>If I include a Blaze template from Vue app which uses Vue router, and that Blaze template wants to provide a link which would change the current page/route in Vue router, how can I do that?...

空空如也

空空如也

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

routevue

vue 订阅