vue.js跳转html,Vue-router实际使用和js方式跳转

基本用法

一.安装和引入和使用vue-router(一步到位)

1.安装(npm安装，看不懂的可以不用往下看了)

npm install vue-router

2.创建路由文件 路径：/src/router/index.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import Login from '../components/Login.vue' //引入组件，用于下面login路由指向

import Demo1 from '../pages/demo1' //直接import引入的组件会在初始的时候全部加载，降低速度，建议使用懒加载

Vue.use(VueRouter)

const routes = [

{

path: '/',

name:"路径名称", //可以不写

redirect: '/login', //如果是/路径, 重定向到login页面

},

{

path: '/login',

component: Login, // 上面引入的login

},

{

path: '/demo1',

component: Demo1, //正常加载

},

{

path: 'a',

component: resolve => require(['@/pages/practice/a'], resolve), //这是懒加载引入方式

},

]

const router = new VueRouter({

mode: 'history',

base: process.env.BASE_URL,

routes,

})

export default router

-------如果要设置子路由(也叫 "二级路由"或"嵌套路由")不用就跳过

{

path: '/standard',

name: 'standard',

component: resolve => require(['@/pages/template/standard'], resolve),

children: [

{

path: 'a',

component: resolve => require(['@/pages/practice/a'], resolve),

},

{

path: 'b',

component: resolve => require(['@/pages/practice/b'], resolve),

},

{

path: 'c', //子路由c

component: resolve => require(['@/pages/practice/c'], resolve),

},

]

},

3.在html中使用vue-router占位符

4.在main.js使用使用vue-router

import Vue from 'vue'

import App from './App.vue'

import router from './router' // 引入上面创建路由文件

new Vue({

router, //使用router

render: (h) => h(App),

}).$mount('#app')

5.路由跳转的使用

点击跳转login组件

点击跳转首页组件

高级用法

二. 路由的加载方式(影响vue项目首页打开速度)

懒加载(使用会更快打开首页)

resolve => require(['@/pages/practice/c'], resolve)

es模块加载(会全部页面加载完成)

component: import Login from '../components/Login.vue'

或

component:()=>import("../views/HelloWorld/index.vue")

三.使用js方式进行跳转链接

1.原生方式:

window.open("URL"); 打开新窗口

window.location.href="URL"; 在当前页面打开新页面

2.vue-router跳转路由：

//1、声明式：

点击查看子页面

点击查看子页面

// :to="" 可以实现绑定动态的 路由 和 参数

// 2、编程式：(带有参数)

1) this.$router.push({path: '/home/sort/detail',query:{id: 'abc'}})

2) this.$router.push({name: 'detail',params:{id: 'abc'}})

//备注： params 和 query 传参的区别：

//1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失

//2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变

3). this.$router.replace() (用法同上,push)

4). this.$router.go(n) //向前或者向后跳转n个页面，n可为正整数或负整数

Ps : 区别

this.$router.push

跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

this.$router.replace

跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面)

四.路由传参

1.传递参数：在路径中标记动态参数名字 /:name

{

path: '/demo2/:name',

component: Demo2,

},

2.路由中传递参数

练习用：跳转首页

练习用：跳转首页

练习用：跳转首页

3.在跳转后的页面接收参数值(两种get/post)

{{$route.params.name}}

{{$route.query.age}}

4.追加路由(两种写法)

localhost:8080/demo2/王花花/more/more/more // 出现重复追加

更多信息 //会有重复追加

更多信息

五.占位视图命名

//占位符对应的路径写法view1 和 view2

{

path: '/post',

components: {

view1: {

path: '/demo1',

component: Demo1,

},

view2: {

path: '/demo2',

component: Demo2,

},

},

},

六.路由守卫

//路由守卫

router.beforeEach(function(to, from, next) {

// next() // 正常执行

// next(false) //所有页面都不可进入

var login_in = false

if (!login_in && to.path === '/post') {

next('login') // 跳转到登录页

} else {

next()

}

})

给路由添加属性login_required

{

path: '/demo1',

meta: {

login_required: true,

},

component: Demo1,

}

//调用router跳转beforeEach函数进行区分跳转

router.beforeEach(function(to, from, next) {

// next() // 正常执行

// next(false) //所有页面都不可进入

if (

to.matched.some(function(item) {

return item.meta.login_required

})

) {

next('login') // 跳转到登录页

} else {

next()

}

})