精华内容
下载资源
问答
  • Vue路由参数:id设置可有可无
    千次阅读
    2019-11-04 17:11:12

    参数后面使用 ?

    id 后面加个 ‘ ? ’ ,将 id 设置为可选参数

    {
        name: "index",
        path: '/p/:id?',
        component: resolve =>void(require(['../components/admin/layout/index.vue'], resolve))
    }
    //  ==
    { path: '/p/:id?', name: 'index', component: Index}

     

    更多相关内容
  • vue路由详解

    千次阅读 2020-12-23 03:55:16
    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤。安装直接下载/CDNUnpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像在 Vue 后面...

    自己看vue文档,难免有些地方不懂,自己整理一下,主要是vue-router具体实现的操作步骤。

    安装

    直接下载/CDN

    Unpkg.com提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像

    在 Vue 后面加载 vue-router,它会自动安装的:

    NPM

    npm install vue-router

    如果在一个模块化工程中使用它,必须要通过 Vue.use() 明确地安装路由功能:

    import Vue from 'vue'

    import VueRouter from 'vue-router'

    Vue.use(VueRouter)

    如果使用全局的 script 标签,则无须如此(手动安装)。

    #基础

    开始

    HTML:

    Hello App!

    Go to Foo

    Go to Bar

    显示的当前路由的内容

    实现路由的跳转

    JavaScript:

    // 0. 如果使用模块化机制编程,導入Vue和VueRouter,要调用 Vue.use(VueRouter)

    // 1. 定义(路由)组件。

    // 可以从其他文件 import 进来

    const Foo = { template: '

    foo
    ' }

    const Bar = { template: '

    bar
    ' }

    // 2. 定义路由

    // 每个路由应该映射一个组件。 其中"component" 可以是

    // 通过 Vue.extend() 创建的组件构造器,

    // 或者,只是一个组件配置对象。

    // 我们晚点再讨论嵌套路由。

    const routes = [

    { path: '/foo', component: Foo },

    { path: '/bar', component: Bar }

    ]

    // 3. 创建 router 实例,然后传 `routes` 配置

    // 你还可以传别的配置参数, 不过先这么简单着吧。

    const router = new VueRouter({

    routes // (缩写)相当于 routes: routes

    })

    // 4. 创建和挂载根实例。

    // 记得要通过 router 配置参数注入路由,

    // 从而让整个应用都有路由功能

    const app = new Vue({

    router

    }).$mount('#app')

    // 现在,应用已经启动了!

    当 对应的路由匹配成功,将自动设置 class 属性值 .router-link-active

    步骤:

    1.在main.js中引入vue-router

    import Vue from 'vue'

    import VueRouter from 'vue-router'

    2.在main.js中使用这个router插件

    Vue.use(VueRouter)

    3.生成这个router实例

    export default new Router(){

    routes:[

    {

    path:'/',

    name:'home',

    component:Home

    },{

    path:'/list',

    name:'list',

    component:List

    }

    ]

    }

    4.在index.js中把路由实例传递给Vue根组件

    import router from './router'

    new Vue({

    el:'#app',

    router,

    template:'',

    components:{ APP }

    })

    静态路由

    静态配置的 ---> import ....

    固定路径路由的配置

    {

    path:'/',

    name:'home',

    component:Home

    },{

    path:'/list',

    name:'list',

    component:List

    }

    动态路由匹配

    只有动态路由可以做到分页的效果

    {

    path:'/list/:id',

    name:'list',

    component:List

    }

    list.vue

    {{title}}

    return {

    title:""

    }

    }

    export default{

    mounted(){

    if(this.$route.params.id == 1){

    //请求第一页数据

    this.title="第一页"

    }

    if(this.$route.params.id == 2){

    //请求第二页数据

    this.title="第二页"

    }

    }

    }

    接收多个个参数

    index.js

    {

    path:'/list/:id/name/:name',

    name:'list',

    component:List

    }

    list.vue

    {{title}}{{name}}

    return {

    title:"",

    name:""

    }

    }

    export default{

    mounted(){

    //结构赋值写法

    const {name,id} = this.$route.params;

    this.name = name;

    //this.name = this.$route.params.name;

    if(this.$route.params.id == 1){

    //请求第一页数据

    this.title="第一页"

    }

    if(this.$route.params.id == 2){

    //请求第二页数据

    this.title="第二页"

    }

    }

    }

    传递不同参数 显示不同数据

    项目应用:详情页

    watch 响应路由参数的变化

    监听路由的变化

    watch:{

    '$route'(to,from){

    this.name = to.params.name;

    }

    }

    在2.2中引入守卫( beforeRouteUpdate)

    守卫 --> 钩子函数

    beforeRouteUpdate (to, from, next) {

    this.name = to.params.name;

    next();//走到下一个钩子

    }

    嵌套路由

    头部左侧不变只有内容区改变 这样的需求可以用嵌套路由来做

    {

    path:'/list',

    name:'list',

    component:List,

    childeren:[{

    path:'a',

    component:A

    }]

    }

    再引入一个A组件 A.vue

    在list.vue组件中通过,显示A组件的内容

    在一个非app组件里面写显示的是当前路由下子组件的内容

    编程式的导航

    除了来创建a标签来定义导航链接,还可以借助router的实例方法

    router.push(location,onCompelte?,onAbort?)

    在Vue实例内部,可以通过$route访问路由实例,因此你可以调用this.$route.push

    想要导航到不同的URL,则使用router.push方法。这个方法会向history栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的URL。

    当你点击时,这个方法会在内部调用,所以说,

    点击 ---> 声明式

    等同于

    调用router.push(...) --->编程式

    可以在Header组件中跳转到list中

    export defalut{

    methods:{

    handleClick(){

    this.$router.push({

    name:'list'

    })

    }

    }

    }

    可以在Header组件中跳转到list/123中

    export defalut{

    methods:{

    handleClick(){

    this.$router.push({

    //一种方式

    //path:'/list/123',

    //2种方式

    name:'list'

    params:{

    id:123

    }

    })

    }

    }

    }

    使用router.push 或者 router.replace 里面都不能让path和params同时存在

    //字符串

    router.push('home');

    //对象

    router.push({path:'home'})

    //命名的路由

    router.push({name:'user',params:{userId:123}})

    //带查询参数,变成/register?plan=private

    router.push({path:'register',query:{plan:'private'}})

    router.replace

    和router.push唯一的不同就是,不会向history添加新纪录,而是替换掉当前的history记录不能返回

    router.go

    命名路由

    定义名字跳转

    命名视图

    var app = new VueRouter({

    routers:[{

    path:'/',

    componens:{

    defaults:Foo,

    a:Bar,

    b:Baz

    }

    }]

    })

    重定向和别名

    访问/abc 重定向到/根路径

    {

    path:'/abc',

    redirect:'/'

    }

    访问/bieming 实际上还是访问的根路径

    {

    path:'/',

    name:'home',

    component:Home,

    alias:'/bieming'

    }

    路由组件传参

    解耦

    动态路由传id

    {

    path:'/list/:id',

    name:'list',

    component:List,

    props:true

    }

    在list.vue中

    可以直接通过props['id']获取数据

    {{id}}

    props['id']

    }

    对象模式

    props:{name:"dell"}

    一般是写死的字符串静态数据

    函数模式

    index.js

    {

    path:'/list/:id',

    name:'list',

    component:List,

    props : (route)=>({

    query:route.query.q

    id:route.params.id

    })

    }

    list.vue

    {{query}}
    {{id}}

    props['query','id']

    }

    我的博客即将搬运同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=1rr2npw3kickj

    展开全文
  • 下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue路由配置

    2022-02-09 21:05:43
    首先安装npm install vue-router ...在main.js里引进路由import VueRouter from 'vue-router' 如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能: 完成! 谢谢观看! ...

    首先安装npm install vue-router

    成功后会在package.json里看到 "vue-router": "^4.0.12"

    第二步:引入路由

    在main.js里引进路由import VueRouter from 'vue-router'

    如果在一个模块化工程中使用它,必须要通过Vue.use()明确地安装路由功能:

    使用固定写法:

     

      完成!

    谢谢观看!

    展开全文
  • 1. router-link 1. 不带参数 <router to={path:> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',...// 路由配置 path: /home/:id 或者 path: /home:id
  • 主要介绍了vue路由对不同界面进行传参及跳转的总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue中给我们提供了三种路由传参方式,下面我们一个一个的来看一下: 方法一:params传参: this.$router.push({ name:"admin",  //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上...
  • 第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新。 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用。后来发现App.vue中使用了<keep>: <div id=app> <router>...
  • <div id=app> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router></router> </div> main.js params传值是通过 :[参数值] 如path: “/home/game/:num” import Vue from 'vue' ...
  • 最近项目上需要用Vue用来做app,在Vue中使用路由时遇到下面的问题。 路由设置如下: { path:'/tab', component:Tab, children:[{ path:'layoutList', name:'LayoutList', component:LayoutList },{ path:'...
  • 使用vue动态路由(“/route/:id” 形式) 传参的时候,修改页面参数,但是视图仍旧是之前的内容,没有进行刷新,示例如下: 原因分析: 具体原因在vue官方文档:响应路由参数的变化一节中有讲过: 当使用路由参数时...
  • 最后找到原因是因为同一个id被启动了两次(第一次是之前使用vue组件时启动的,另外一个是路由时启动的) 附上部分代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引入...
  • vue 路由meta 设置title 导航隐藏,具体代码如下所示: router.js routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld, meta: { title: HelloWorld, 要现实的title show: true 设置导航隐藏...
  • vue项目中,假使我们在同一个路由下,只是改变路由后面的参数值,期望达到数据的更新。 mounted: () =>{ this.id = this.$route.query.id; this.getdetail() } getDetail()方法中会用到this.id这个参数,在同一...
  • 主要介绍了Vue路由history模式解决404问题的几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • Vue 路由配置

    千次阅读 2022-03-13 16:11:33
    Vue 路由配置 为什么使用路由?   在项目中创建了 First.vue 和 Second.vue 两个页面,如果按照组件方式进行操作这两个页面,数据固定显示在 App.vue 中,但是我们知道正常项目都是通过不同的 URL 控制显示不同...

    Vue 路由配置

    为什么使用路由?

      在项目中创建了 First.vue 和 Second.vue 两个页面,如果按照组件方式进行操作这两个页面,数据固定显示在 App.vue 中,但是我们知道正常项目都是通过不同的 URL 控制显示不同页面。在 SPA(单页面应用) 项目中,也是需要通过不同的 URL 在 App.vue 中显示不同的数据。路由做的是通过 URL 控制哪个页面显示在 App.vue 中的功能/组件。

    什么是路由?

       在 Vue 中路由就是控制显示哪个页面,通过路由显示的页面是显示在 App.vue 中的,当更改 URL 后只改变 App.vue 页面中路由部分对应的内容,也就是说通过路由显示时,也是属于局部刷新效果。

    注:在 App.vue 中通过 <router-view> 显示路由内容。

    1. 安装路由依赖

    在 IDEA 中的 Terminal 面板运行命令:cnpm install --save vue-router

    说明:--save 表示把添加的依赖写入到 package.json,如果没有 --save 效果上也是可以的,但是加上可以更好的知道项目都使用了哪些组件。

    运行成功后会在 package.json 中增加了 router 相关依赖:

    2. 新建两个页面

    在 src 下新建了 views 文件夹,并在该文件夹下新建了两个 .vue 的页面:

    页面一:src/views/First.vue

    <template>
        The First Page.
    </template>
    
    <script>
        export default {
            name: "First"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    页面二:src/views/Second.vue

    <template>
        The Second Page.
    </template>
    
    <script>
        export default {
            name: "Second"
        }
    </script>
    
    <style scoped>
    
    </style>
    

    此时这两个页面是无法直接访问的。

    3. 修改 main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    
    
    //1.导入路由依赖,安装了vue-router组件后系统自带的依赖
    import { createRouter, createWebHistory } from 'vue-router';
    
    //2.导入两个页面
    import First from "@/views/First";
    import Second from "@/views/Second";
    
    //3.创建路由对象,new VueRouter为上面import设置的名称
    const router = createRouter({
        history: createWebHistory(), //没有history,访问URL会有#
        routes:[
            {
                path: '/first',
                component: First
            },
            {
                path: '/second',
                component: Second
            },
        ]
    });
    
    //注意use要在mount之前,使用该路由
    createApp(App).use(router).mount('#app');
    

    4. 修改 App.vue

    必须要有 <router-view/> 否则无法显示路由控制的页面。

    <template>
        <div id="app">
            <p>这里是 App.vue 页面</p>
            <!--路由视图-->
            <router-view/>
           <MyComponent name="张三" v-bind:age="15"></MyComponent>
        </div>
    </template>
    


    注意:如果 npm run serve 启动运行项目时,出现如下的保存信息:

    需要在 vue.config.js 的配置文件中,加入一行 lintOnSave:false,再重新启动项目运行。

    const { defineConfig } = require('@vue/cli-service');
    module.exports = defineConfig({
        transpileDependencies: true,
        lintOnSave:false  //添加这一行
    });
    

    5. 优化结构

    把 main.js 中和路由相关的内容放到一个单独的 js 文件中,这代码更容易维护。在 src 下新建 router 文件夹,在文件夹中新建 index.js。

    1、index.js

    //1.导入路由依赖,安装了vue-router组件后系统自带的依赖
    import { createRouter, createWebHistory } from 'vue-router';
    
    //2.导入两个页面
    import First from "@/views/First";
    import Second from "@/views/Second";
    const routerHistory = createWebHistory();
    
    //3.创建路由对象,new VueRouter为上面import设置的名称
    const router = createRouter({
        history: routerHistory,
        routes:[
            {
                path: '/first',
                component: First
            },
            {
                path: '/second',
                component: Second
            },
        ]
    });
    
    export default router;
    

    最后一行 export default router 必须将这个配置好的路由信息导出,否则 main.js 无法获取 router 对象。

    2、main.js

    import { createApp } from 'vue'
    import App from './App.vue'
    
    //导入./router/index文件里面配置好的路由
    import router from './router/index'
    
    //注意use要在mount之前,使用该路由
    createApp(App).use(router).mount('#app');
    

    这样优化之后对于代码维护更加简便。

    展开全文
  • Vue路由最全详解

    千次阅读 2022-03-05 14:32:40
    现在的手机软件普遍都是单页面应用,尤其是商城类网站应用更广,那么为什么大多数企业都选择了单页面应用呢,...引入Vue.js,当加入Vue Router时,我们就需要把我们的组件映射到路由上,让Vue Router知道在哪里渲染他们
  • vue路由教程之静态路由

    千次阅读 2021-06-24 03:50:59
    前言vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的...
  • Vue路由详解

    千次阅读 2021-01-08 10:07:08
    3.能够使用Vue-Router实现前端路由 4.能够实现嵌套路由,动态路由 5.能够实现命名路由以及编程式导航 6.理解并实现后台管理案例 1.路由的概念 路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的...
  • Vue路由的使用详解

    千次阅读 2022-03-14 12:16:52
    路由1、锚点实现前台路由1.1----效果2、Vue实现前台路由2.1----准备2.2----使用效果3、嵌套路由3.1----使用3.2----效果图4、动态路由4.1----路径带参使用效果图4.2----props传参使用效果图4.3----混合传参使用效果图...
  • vue 路由判断

    千次阅读 2022-04-02 00:52:04
    修改阅读人数 setpeo(){ let params = `artical_peo=${this.artical_peo}&&id=${this.id}` this.axios.put('/read',params).then(res=>{ // console.log(res); }) }, 写完之后要用到一个钩子函数beforeRouteEnter来...
  • Vue路由部分面试题

    千次阅读 2021-12-21 16:59:18
    2. vue-router怎么配置路由 2.1.在router的router.js import Vue from 'vue' import VueRouter from 'vue-router' // Vue.use() 函数的作用,就是来安装插件的 Vue.use(VueRouter) // 创建路由的实例对象 const ...
  • <div id=app> <router></router> 同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作。 解决方法: 1、给 router-view 设置 key 属性为路由的完整路径 $route.fullPath> 这种方法我...
  • Vue路由高级用法及案例

    千次阅读 2022-01-30 11:31:28
    目录Vue中路由跳转的方式router-linkthis.$routerthis.$route路由重定向动态路由嵌套路由路由导航的两种方式 Vue中路由跳转的方式 router-link 是实现跳转最简单的方法,又叫做标签式导航。 <router-link to='...
  • Vue 路由升级 - 编程式路由

    千次阅读 2022-03-14 14:26:38
    注意:在 Vue 实例中,你可以通过$router访问路由实例。因此你可以调用this.$router.push。 想要导航到不同的 URL,可以使用router.push方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器...
  • 路由跳转 1.声明式路由跳转 (不带参数) 通过router-link标签进行跳转,使用name或者path都可以,在dom结构中会被渲染成a标签 注意:router-link中链接如果是’/‘开始就是从根路由开始,如果开始不带’/’,则从...
  • 路由某部分里加入[ : ],就成为动态路由如:/user/:id/,那么路由导航,并不是 /user/id/ 而是 /user/666/。 显然这个 id 能被获取,在组件中使用。通过 this.$route.params 获取。 this 是当前组件,$route 是...
  • vue路由重定向和动态路由 文章目录vue路由重定向和动态路由vue路由重定向动态路由 vue路由重定向 实现页面跳转一般有两种方式:重定向页面和转发页面。 重定向页面的具体实现方式就是更改页面的URL,跳转到指定的...
  • vue路由传参的几种方式

    千次阅读 2022-02-11 15:50:24
    vue跳转路由并携带参数的几种传参方式,和使用,路由的props属性的使用
  • 1.先在router.js中配置路由 ...2.获取详情页的id,并派发父组件事件(movieList.vue)页面 (item,index) key=index click=selectItem(item)> 。。。。。。。 methods:{ selectItem(item){ //console.log(item.m

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 55,460
精华内容 22,184
关键字:

vue 路由id

友情链接: clk_cmos.rar