vue 跳路由 destroy vue进行路由跳转

一、路由与路由器 

路由(route):路径和组件的匹配；

路由器(router)：管理这些匹配规则的一个管理者； 

vue-router的理解

vue的⼀个插件库，专⻔⽤来实现SPA应⽤

对SPA应⽤的理解

1. 单⻚⾯web应⽤（single page web application，SPA）

2. 整个应⽤只有⼀个完整的⻚⾯

3. 点击⻚⾯中的导航链接不会刷新⻚⾯，只会做⻚⾯的局部更新

4. 数据需要通过ajax请求获取 路由的理解

1. 什么是路由？

⼀个路由就是⼀组映射关系（key-value），key为路径，value为component（⽤于展示⻚⾯内容）

⼯作过程：当浏览器的路径改变时，对应的组件就会显示

 二、路由的基本使用

• 1. 安装路由vue-router，npm install vue-router
• 2. 应⽤插件：Vue.use(VueRouter)

// 安装路由之后，在main.js引入路由器
import VueRouter from 'vue-router'
// 注册全局使用
Vue.use(VueRouter)

• 3. 编写router配置项

 编写router文件夹里的index.js文件：

// 引入路由
import VueRouter from 'vue-router'
// 引入组件
import Home from '../components/Home.vue'
import About from '../components/About.vue'

// 创建router实例对象，让他去管理我们对应的关系
const router=new VueRouter({
  // vue-router 默认 hash 模式  当使⽤ history 模式时，URL 就像正常的 url。url去掉了#
  mode:'history',
  routes:[
  {
    path:'/home',//路径
    component:Home,//组件
    //好处和坏处：当一个路由出现问题的时候，会自动重定向到另外一个路由上去，保证你的数据畅通。 
   坏处：可能会出现一定的延时，造成网速变慢。但是一切都是由路由器的路由表自动控制的。
  //路由重定向指的是：用户在访问地址A的时候，强制用户跳转到地址B，从而在展示特定的组件页面(相当于 
  在点击跳转一个页面的时候设置一个默认显示的内容区域)
  //通过路由规则的redirect 属性,指定一个新的路由地址，可以很方便地设置路由的重定向
  redirect: '/About',//路由重定向，
  },
  {
    path:'/About',
    component:About,
  },
  {
    path:"/views/test",
    component:()=>import('../views/test.vue'),//注册组件的另一种写法,不需要导出名字
    children:[{
      // '/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
      path:"test2",
      component:()=>import('../views/test2.vue'),//
    }]
  },
]
})
//暴露router  导出
export default router

main.js：（在main.js引入上面写的路由配置）

// 引入写的路由路径
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 注册路径
  router,
}).$mount('#app')

 在APP.vue使用路由转跳（使用方案一进行转跳）：（注意：要完成路由的基本配置才能进行路由的转跳）

<!-- 用于路径跳转  根据路径实现跳转-->
    <router-link to="/home">home</router-link><br>
    <router-link to="/About">about</router-link><hr>
    <router-link to="/views/test">test
   
    </router-link> <router-link to="/test2">test2</router-link>
    <!-- 容器 告诉vue将通过路径拿到的组件放到哪里去 , 用于显示路径里的组件的内容-->
    <router-view></router-view>

三、路由跳转的方式

方案一：声明式导航router-link

不带参数：

// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link :to="{name:'home'}">  
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name 
//对象写法要动态绑定，也可以不用对象写法。  路径是对应路由的配置
<router-link to="/home">//不能动态绑定

带参数：

<router-link :to="{name:'home', params: {id:1}}">
<router-link :to="{name:'home', query: {id:1}}">  
<router-link :to="/home/:id">  
//传递对象
<router-link :to="{name:'detail', query: {item:JSON.stringify(obj)}}"></router-link>

name方式与 path方式的区别：

<router-link :to="{path:'/home/message/details',query:{id:m.id}}">查看详情</router-link>
<!-- name 路由的简化写法，不用写/路径，在路由配置文件路径那使用name,这里直接使用name属性，更便捷 -->
<router-link :to="{name:'xxx',query:{id:m.id}}">查看详情</router-link>

 方案二：编程式导航 this.$router.push()

2.1不带参数：

this.$router.push('/home')
this.$router.push({name:'home'})
this.$router.push({path:'/home'})

2.2 query传参：

1.在路由文件配置 路由配置：
name: 'home',
path: '/home'
2.跳转：
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
3.在转跳到的页面接收获取参数
html取参: $route.query.id
script取参: this.$route.query.id

2.3 params传参:

1.路由配置：
name: 'home',
path: '/home/:id'(或者path: '/home:id')  注意：与上面query不同
2.跳转：
this.$router.push({name:'home',params: {id:'1'}})
注意：
// 只能用 name匹配路由不能用path
// params传参数(类似post)  路由配置 path: "/home/:id" 或者 path: "/home:id"否则刷新参数消失
3.在转跳到的页面接收获取参数
html取参:$route.params.id 
script取参:this.$route.params.id

2.4 直接通过path传参:

1.路由配置：
name: 'home',
path: '/home/:id'
2.跳转：
this.$router.push({path:'/home/123'}) 
或者：
this.$router.push('/home/123') 
3.在转跳到的页面接收获取参数：
this.$route.params.id

2.5 params和query的区别

query类似 get，跳转之后页面 url后面会拼接参数，类似?id=1。
非重要性的可以这样传，密码之类还是用params，刷新页面id还在。
params类似 post，跳转之后页面 url后面不会拼接参数。

query 传参配置的是path，而params传参配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传参刷新会无效，但是query会保存传递过来的值，刷新不变 ; 

params: 参数不会显示在url地址上，刷新页面参数会消失，不能和path合作传参
query：参数会显示在url地址上，刷新页面不会消失 能和name以及path合作传递参数
 

方案三 this.$router.go(n)

向前或者向后跳转n个页面，n可为正整数或负整数

方案四 this.$router.replace

说明：跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面

跟 router.push 很像，唯⼀的不同就是，它不会向 history 添加新记录，⽽是跟它的⽅法名⼀样 —— 替换掉 当前的 history 记录。（与window.location.replace('index.html')原理一样）

this.$router.replace({ name:'about', params:{ id:666 } })

其他方式

this.$router.forward() //前进

this.$router.back() //后退

总结：

1.query可以用name和path匹配路由，通过this.$route.query.id获取参数，刷新浏览器参数不会丢失
2.params只能用name匹配路由，通过path匹配路由获取不到参数，对应的路由配置path:'/home/:id'或者path:'home:id'，否则刷新浏览器参数丢失
3.直接通过url传参，push({path: '/home/123'})或者push('/home/123')，对应的路由配置path:'/home/:id'，刷新浏览器参数不会丢失。