标签：vue name title day07 path 组件 router 路由

vue-router使用

以后用组件的切换来实现页面切换效果，必须借助于vue-router来实现

vuex学过的：

<router-view/>，显示组件，位置在router/index.js中配置，提供的
<router-link :to="about_url">作业面跳转

基本使用

写一个页面组件
配置访问某个路径显示这个页面组件

路由跳转

html 中通过标签跳转

<router-link :to="about_url">
      <button>点我跳到about标签的跳转</button>
</router-link>
    
<router-link to="/about">
          <button>点我跳到about标签的跳转</button>
</router-link>

js 控制页面跳转

方式一：地址形式

this.$router.push('/about')

方式二：对象形式

this.$router.push({name: 'about'})#通过地址的别名
this.$router.push({path: '/about'})# 通过地址

相关api

this.$router.push(path): 相当于点击路由链接(可以返回到当前路由界面)
this.$router.replace(path): 用新路由替换当前路由(不可以返回到当前路由界面)
this.$router.back(): 请求(返回)上一个记录路由
this.$router.go(-1): 请求(返回)上一个记录路由
this.$router.go(1): 请求下一个记录路由

 页面跳转携带数据

方式一：？后携带数据

标签跳转

<router-link to="/userinfo?user_id=9">
<router-link :to="{name:userinfo,query:{user_id:88}}">

js 跳转

this.$router.push("/userinfo?user_id=9")
this.$router.push({name:userinfo,query:{user_id:88}})

取值：$route而不是router

this.$route.query.user_id

方法二：/xx/:id/:name

配置路由：

{

path: '/userinfo/:id/:name',
name: 'userinfo',
component: UserDetail

}，

跳转的时候

标签跳转

<router-link to="/userinfo/88/lqz">
<router-link :to="{name:userinfo,params:{id:88,name:lqz}}">

js 跳转

this.$router.push("/userinfo/88/lqz")
this.$router.push({name:userinfo,params:{id:88,name:lqz}})

取值的时候：

this.$route.params.id

多级路由

新建一个首页HomeView，一个IndexView和OrderView

1.构建出骨架，以后想点击只要这个位置变，就放一个<router-view/>
2.IndexView和OrderView正常写

定义多级路由

 {
        path: '/',
        name: 'home',
        component: HomeView,
        children: [ //通过children配置子级路由
            {
                path: 'index', //此处一定不要写：/news
                component: IndexView
            },
            {
                path: 'order',//此处一定不要写：/message
                component: OrderView
            }
        ]
    },

 

路由跳转：js，html

路由守卫

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫

// 该文件专门用于创建整个应用的路由器（router下的index.js）
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},

                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('name')==='lqz'){
            next()
        }else{
            alert('名不对，无权限查看！')
        }
    }else{
        next()
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || 'lqz系统'
})

export default router

独享守卫

// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
//引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'
import Message from '../pages/Message'
import Detail from '../pages/Detail'

//创建并暴露一个路由器
const router =  new VueRouter({
    routes:[
        {
            name:'guanyu',
            path:'/about',
            component:About,
            meta:{title:'关于'}
        },
        {
            name:'zhuye',
            path:'/home',
            component:Home,
            meta:{title:'主页'},
            children:[
                {
                    name:'xinwen',
                    path:'news',
                    component:News,
                    meta:{isAuth:true,title:'新闻'}
                },
                {
                    name:'xiaoxi',
                    path:'message',
                    component:Message,
                    meta:{isAuth:true,title:'消息'},
                    children:[
                        {
                            name:'xiangqing',
                            path:'detail',
                            component:Detail,
                            meta:{isAuth:true,title:'详情'},

                            //props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
                            // props:{a:1,b:'hello'}

                            //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
                            // props:true

                            //props的第三种写法，值为函数
                            props($route){
                                return {
                                    id:$route.query.id,
                                    title:$route.query.title,
                                    a:1,
                                    b:'hello'
                                }
                            }

                        }
                    ]
                }
            ]
        }
    ]
})

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
    console.log('前置路由守卫',to,from)
    if(to.meta.isAuth){ //判断是否需要鉴权
        if(localStorage.getItem('name')==='lqz'){
            next()
        }else{
            alert('名不对，无权限查看！')
        }
    }else{
        next()
    }
})

//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to,from)=>{
    console.log('后置路由守卫',to,from)
    document.title = to.meta.title || 'lqz系统'
})

export default router

组件守卫

//进入守卫：通过路由规则，进入该组件时被调用
   beforeRouteEnter (to, from, next) {
   },
   //离开守卫：通过路由规则，离开该组件时被调用
   beforeRouteLeave (to, from, next) {
   }


    //通过路由规则，进入该组件时被调用
        beforeRouteEnter (to, from, next) {
            console.log('About--beforeRouteEnter',to,from)
            if(to.meta.isAuth){ //判断是否需要鉴权
                if(localStorage.getItem('school')==='atguigu'){
                    next()
                }else{
                    alert('学校名不对，无权限查看！')
                }
            }else{
                next()
            }
        },

        //通过路由规则，离开该组件时被调用
        beforeRouteLeave (to, from, next) {
            console.log('About--beforeRouteLeave',to,from)
            next()
        }

路由器的两种工作模式

1 对于一个url来说，什么是hash值？—— #及其后面的内容就是hash值。
2 hash值不会包含在 HTTP 请求中，即：hash值不会带给服务器。
3 hash模式：
地址中永远带着#号，不美观 。
若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。
兼容性较好。
4 history模式：
地址干净，美观 。
兼容性和hash模式相比略差。
应用部署上线时需要后端人员支持，解决刷新页面服务端404的问题

localStorage系列

前端存储数据的地方

可以放到cookie中，cookie有过期时间，一旦过期就清理了
可以当到localStorage，永久存储，除非使用代码删除，清理浏览器
可以存到sessionStorage，关闭浏览器就没了

场景：不登录加购物车

作用：判断用户的登录状态（通过token）

localStorage

存：
    var obj = {"name":"xiaoming","age":"16"}
    localStorage.setItem("userInfo",JSON.stringify(obj));
取：
    var user = JSON.parse(localStorage.getItem("userInfo"))
删除：
    localStorage.remove("userInfo);
清空：
    localStorage.clear();

sessionStorage

savesessionStorage() {
     
      var userinfo = {'name': 'lqz', 'age': 19}
      sessionStorage.setItem('userinfo', JSON.stringify(userinfo))
    },
    getsessionStorage() {
      var res = JSON.parse(sessionStorage.getItem('userinfo'))
      console.log(res)
    },
    deletesessionStorage() {
      sessionStorage.clear()
      sessionStorage.removeItem('username')
    },

cookie

使用js-cookie工具：

1.npm i js-cookie //安装
2.import Cookies from 'js-cookie' //引用

// 存入cookie：
Cookies.set('token','value')

// 获取cookie：
Cookies.get('token')

//删除cookie:
Cookies.remove('token')

vue3的介绍

源码升级

使用Proxy代替defineProperty实现响应式

重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

Vue3可以更好的支持TypeScript
兼容JavaScript

新的特性

Composition API（组合API）

    setup配置
    ref与reactive
    watch与watchEffect
    provide与inject
新的内置组件

    Fragment
    Teleport
    Suspense
其他改变

    新的生命周期钩子
　　data 选项应始终被声明为一个函数
    移除keyCode支持作为 v-on 的修饰符

 

组合式api和配置项api

配置项api定义组件

export default {
        data(){
            name:ss
        }
        mehtods:{
            console.log(name)
        }
    }

组合式api定义组件

setup{
        var name =ss
        console.log(name)
    }

标签：vue,name,title,day07,path,组件,router,路由
From： https://www.cnblogs.com/shanghaipudong/p/17733047.html