路由跳转 Vue 原生js

一、路由跳转

1.push

    Vue中this.$router.push（参数） 实现页面跳转
    // 字符串
    this.$router.push('/home/first')
    // 对象
    this.$router.push({ path: '/home/first' })
    // 命名的路由
    this.$router.push({ name: 'home', params: { userId: wise }})
    this.$router.push({ name: 'home', query: { userId: wise }})

2.replace

    this.$router.replace() (用法同上,push)
  
    //push和replace区别
    this.$router.push
    跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
    this.$router.replace
    跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)	
    
    
    // 接收参数
    // script 取参 this.$route.query.userId
    // script 取参 this.$route.params.userId
    
    //query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在

params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失

3.router-link

//创建路由实例  
const router = new VueRouter({routes})  

new Vue({  
    el: '#app',  
    data: {  
    },  
    methods: {  
    },  
    router  
})



// 路由出口
<router-view></router-view>  

router文件夹的index.js:


import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
//按需加载,导入
const Home=(resolve)=>{
  import('../views/Home').then((module)=>
    resolve(module)
)}
const Support=(resolve)=>{
  import('../views/Support').then((module)=>
    resolve(module)
)}
const HtmlCss=(resolve)=>{
  import('../components/home/HtmlCss').then((module)=>
    resolve(module)
)}
const JS=(resolve)=>{
    import('../components/home/JS').then((module)=>
        resolve(module)
)}



const routes = [
  {path:'/',redirect:'/home/htmlCss'},
  {path:'/home',redirect:'/home/htmlCss'},
  {path:'/Home',
     component:Home,
     children:[{
         path:'htmlCss',
         component:HtmlCss,
     },{
         path:'js',
         component:JS,
     }
    ]
  },
  {path:'/Support',component:Support},
]

const router = new VueRouter({
  routes:routes
})

export default router

1.不带参数

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，如果开始不带'/'，则从当前路由开始。
<router-link tag="li" :to="item.path" class="item" :class='{bg:index==activeIndex}'>
      <div @click="bgcChange(index)">{{item.discp}}</div>
</router-link>

 path: "/about",

2.带参数

// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// script 取参 this.$route.params.id

<router-link tag="li"  :to="{name:'home', params: {id:1}}">


<router-link  tag="li"  :to="{name:'home', query: {id:1}}">

4.go

// 可能没用，没用就用push
   this.$router.go(-1)
// 向前或者向后跳转n个页面，n可为正整数或负整数
   this.$router.go(n)

5.location 原生js对象

location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面

6.history 原生js对象

history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

7.此外 navigator 原生js对象

navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie

二、弹窗，就visible控制显示隐藏